每行显示 2 个项目[反应原生] [英] show 2 items per row[react native]
问题描述
我正在学习 react native,在所有教程中,我看到 ListView 只使用了每行 1 个项目.不过,我没有使用过 ListView.我只有 6 个项目必须显示为平面网格,每行 2 个项目并且应该是响应式的.我知道这是一个基本问题,但我也从我这边尝试过,可以在图像中看到
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
这是我的代码
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>
);
}
推荐答案
要使用 ListView
制作 2 行网格,您可以使用以下代码作为示例:
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 个项目[反应原生]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!