私はリアクションネイティブを学んでおり、すべてのチュートリアルでListViewは行ごとに1つのアイテムのみで使用されています。ただし、ListViewは使用していません。行ごとに2つのアイテムを持つフラットグリッドとして表示する必要がある6つのアイテムのみがあり、応答する必要があります。私はその基本的な質問を知っていますが、私も自分の側から試しました。これは画像に見ることができます
これは私のコードです
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行のグリッドを作成するには、このコードを例として使用できます。
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',
},
});
スタイルを変更して、画面に表示する行数を選択します。このコードはレスポンシブです。
反応ネイティブからフラットリストを試すことができます。ここで、列の数を指定でき、垂直方向または水平方向を指定することもできます。サンプルコード:
<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 を参照してください。
正しい方法はflexBasis
を使用し、値を(1/n)%
に設定することです。ここで、n
は必要な行数> 0です。2行の場合:
.parent {
flex: 1;
flexWrap: wrap;
flexDirecton: row;
}
.child {
flexBasis: '50%';
}
デバイス幅のインポートについてグリッドビューを非常に反応させたい場合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つの列で作業しています: FlatList with numColumns={3}