React Nativeで9つの正方形ビューをレイアウトするにはどうすればいいですか？

Question

以下の画像のように四角いレイアウトを実現する方法は？

または関連パッケージがありますか？

Answer 1

私は、静的なグリッドビューを達成するためにScrollViewとフレキシボックスの組み合わせを使用しています。

import {Dimensions} from 'react-native'; 

.... 

return (
    <ScrollView> 
    <View style={styles.container}> 
     { 
     this.props.categories.map((category, index) => { 
      return (
      <TouchableOpacity 
       key={index} 
       style={styles.item} 
       onPress={() => {}} 
      > 
       <Image 
       style={styles.itemIcon} 
       source="..." 
       /> 
       <Text style={styles.itemTitle}> 
       {category.name} 
       </Text> 
      </TouchableOpacity> 
     ) 
     }) 
     } 
    </View> 
    </ScrollView> 
) 

var styles = StyleSheet.create({ 
    container: { 
     flexDirection: 'row', 
     flexWrap: 'wrap' 
    }, 
    item: { 
     width: Dimensions.get('window').width * 0.5, 
     height: 100, 
     borderWidth: 1, 
     borderColor: "lightgray", 
     alignItems: 'center', 
     justifyContent: 'center'   
    }, 
    itemIcon: { 
     width: 100, 
     height: 100, 
     resizeMode: 'contain' 
    }, 
    itemTitle: { 
     marginTop: 16, 
    }, 
});