[英]show 2 items per row[react native]
我正在学习本机反应,在所有教程中,我看到 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 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>
);
}
正确的方法是使用flexBasis
,将值设置为(1/n)%
,其中n
是所需的行数 > 0。对于两行:
.parent {
flex: 1;
flexWrap: 'wrap';
flexDirecton: 'row';
}
.child {
flexBasis: '50%';
}
您可以尝试使用 react native 中的 flat list。 您可以在其中指定列数,也可以提及垂直方向或水平方向。 示例代码:
<FlatList
data={this.props.data}
keyExtractor={this._keyExtractor} //has to be unique
renderItem={this._renderItem} //method to render the data in the way you want using styling u need
horizontal={false}
numColumns={2}
/>
有关更多信息,请参阅https://facebook.github.io/react-native/docs/flatlist.html 。
要使用ListView
制作 2 行网格,您可以使用以下代码作为示例:
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',
},
});
更改样式以选择要在屏幕上看到的行数。 此代码是响应式的。
如果你想让网格视图真正响应设备宽度导入Dimesions :
import {
StyleSheet,
Text,
...
Dimensions,
} from 'react-native';
并为此更改gridItem宽度:
gridItem: {
margin: 5,
width: Dimensions.get('window').width / 2.2, //Device width divided in almost a half
height: 150,
justifyContent: 'center',
alignItems: 'center',
},
您也可以将图像宽度更改为与gridItem相同或更小。
您可以使用 FlatList 并将numColumns={2}
prop 和style={{ flexDirection: 'column' }}
设置为它。 就我而言,我正在使用 3 个numColumns={3}
: FlatList with numColumns={3}
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
试着把这个!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.