Ser*_*ity 16 javascript flexbox reactjs 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>
);
}
Run Code Online (Sandbox Code Playgroud)
Tha*_*i C 18
您可以尝试使用本机的平面列表.在哪里可以指定列数,也可以提到垂直方向或水平方向.示例代码:
<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}
/>
Run Code Online (Sandbox Code Playgroud)
有关更多信息,请参阅https://facebook.github.io/react-native/docs/flatlist.html.
nik*_*ong 15
正确的方式来做到这将是与flexBasis
,具有设置成一个值(1/n)%
,其中n
是行> 0.对于两行的期望#:
.parent {
flex: 1;
flexWrap: wrap;
flexDirecton: row;
}
.child {
flexBasis: '50%';
}
Run Code Online (Sandbox Code Playgroud)
leo*_*o7r 11
要使用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',
},
});
Run Code Online (Sandbox Code Playgroud)
更改样式以选择要在屏幕上显示的行数.此代码具有响应性.
如果你想使网格视图真实地响应有关该设备的宽度进口Dimesions:
import {
StyleSheet,
Text,
...
Dimensions,
} from 'react-native';
Run Code Online (Sandbox Code Playgroud)
并为此更改gridItem宽度:
gridItem: {
margin: 5,
width: Dimensions.get('window').width / 2.2, //Device width divided in almost a half
height: 150,
justifyContent: 'center',
alignItems: 'center',
},
Run Code Online (Sandbox Code Playgroud)
您还可以将图像宽度更改为与gridItem相同或更小.
您可以使用FlatList并将其设置为numColumns={2}
prop和style={{ flexDirection: 'column' }}
。就我而言,我正在使用3个列:
FlatList withnumColumns={3}
归档时间: |
|
查看次数: |
25505 次 |
最近记录: |