问题描述
我正在学习反应本地和所有的教程,我看到ListView已被使用,每行只有1项。虽然我没有使用ListView。我只有6个项目必须显示为平行网格,每行2个项目,并且应该是响应式的。我知道它是一个基本的问题,但是我也从我的身边尝试过,可以在图像中看到
这是我的代码
renderDeviceEventList(){
return _.map(this.props.deviceEventOptions,(deviceEventOption)=>
(
< View key = {deviceEventOption.id}>
< Icon
name = {deviceEventOption.icon_name}
color ='#ddd'
size = {30}
onPress = {()=> this.props.selectDeviceEvent(deviceEventOption)}
/ >
< / text>
< / View>
< / Text>
< / Text> {bf4c4c'}}> {deviceEventOption.icon_name} );
$(
$(
$ b $ flex:1,
top:60,
flexDirection:'row',
justifyContent:'space-around',
flexWrap:'wrap',
marginBottom:10,
}}
>
{this.renderDeviceEventList()}
< / View>
);
使用 ListView
你可以使用这个代码作为例子:
$ b $ $ p $ renderGridItem item){
return(< TouchableOpacity style = {styles.gridItem}>
< View style = {[styles.gridItemImage,justifyContent:'center',alignItems:'center'}]}} >
< Text style = {{fontSize:25,color:'white'}}>
{item.fields.name.charAt(0).toUpperCase()}
< / Text>
< / View>
< Text style = {styles.gridItemText}> {item.fields.name}< / Text>
< / TouchableOpacity> ;
);
renderCategories(){
var listItems = this.dsinit.cloneWithRows(this.state.dataSource);
$ b $ return(
< ScrollView style = {{backgroundColor:'#E8E8E8',flex:1}}>
< ListView
contentContainerStyle = {styles .grid}
dataSource = {listItems}
renderRow = {(item)=> this.renderGridItem(item)}
/>
< / ScrollView>
); (b
$ b $ style = StyleSheet.create({
grid:{
justifyContent:'center',
flexDirection:'row',
flexWrap:'wrap',
flex:1,
},
gridItem:{
margin:5,
width:150,
height :150,
justifyContent:'center',
alignItems:'center',
},
gridItemImage:{
width:100,
height: 100,
borderWidth:1.5,
borderColor:'white',
borderRadius:50,
},
gridItemText:{
marginTop:5,
textAlign:'center',
},
});
更改样式以选择想要在屏幕上看到的行数。这段代码是响应式的。
I am learning react native and in all the tutorials i see ListView has been used with only 1 items per row. I have not used ListView, though. I have only 6 items that has to be shown as flat grid with 2 items per row and should be responsive. I know its a basic question, but i have tried from my side too which can be seen in the image
This is my code
renderDeviceEventList() {
return _.map(this.props.deviceEventOptions, (deviceEventOption) =>
(
<View key={deviceEventOption.id}>
<Icon
name={deviceEventOption.icon_name}
color='#ddd'
size={30}
onPress={() => this.props.selectDeviceEvent(deviceEventOption)}
/>
<Text style={{ color: '#ff4c4c' }}>{deviceEventOption.icon_name}</Text>
</View>
));
}
render() {
return (
<View style={{
flex: 1,
top: 60,
flexDirection: 'row',
justifyContent: 'space-around',
flexWrap: 'wrap',
marginBottom: 10,
}}
>
{this.renderDeviceEventList()}
</View>
);
}
To make a 2 row grid using ListView
you could use this code as an example:
renderGridItem( item ){
return (<TouchableOpacity style={styles.gridItem}>
<View style={[styles.gridItemImage, justifyContent:'center', alignItems:'center'}]}>
<Text style={{fontSize:25, color:'white'}}>
{item.fields.name.charAt(0).toUpperCase()}
</Text>
</View>
<Text style={styles.gridItemText}>{item.fields.name}</Text>
</TouchableOpacity>
);
}
renderCategories(){
var listItems = this.dsinit.cloneWithRows(this.state.dataSource);
return (
<ScrollView style={{backgroundColor: '#E8E8E8', flex: 1}} >
<ListView
contentContainerStyle={styles.grid}
dataSource={listItems}
renderRow={(item) => this.renderGridItem(item)}
/>
</ScrollView>
);
}
const styles = StyleSheet.create({
grid: {
justifyContent: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
flex: 1,
},
gridItem: {
margin:5,
width: 150,
height: 150,
justifyContent: 'center',
alignItems: 'center',
},
gridItemImage: {
width: 100,
height: 100,
borderWidth: 1.5,
borderColor: 'white',
borderRadius: 50,
},
gridItemText: {
marginTop: 5,
textAlign:'center',
},
});
Change styles to choose how many rows you want to see on screen. This code is responsive.
这篇关于每行显示2项[反应原生]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!