[英]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.