リアクト - ネイティブグリッドのスタイル

Question

を次のコードで：

<View style={{width:100,height:100,flexDirection:'row'}}> 
     <View style={{width:50, height:100}}> 
      a 
     </View> 
     <View style={{width:50, height:50}}> 
      b 
     </View> 
     <View style={{width:50, height:50}}> 
      c 
     </View> 
    </View> 

- >I want to (IMAGE)

「反応するネイティブ・簡単・グリッド」でこれを行うことが可能ですとしょうかん。

ただし、このライブラリと上記のコード構造を使用しないとこれを行うことはできません。行と列を使用しない。

高さと幅の値のみを指定して自動配置を行うことはできますか？

Answer 1

あなたはフレキシボックスでこれを達成することができます

<View style={{flex: 1, flexDirection:'row'}}> 
 
    <View style={{flex: 1, backgroundColor: 'red'}}> 
 
    <Text>a</Text> 
 
    </View> 
 
    <View style={{flex: 1, flexDirection:'column'}}> 
 
    <View style={{flex: 1, backgroundColor: 'green'}}> 
 
     <Text>b</Text> 
 
    </View> 
 
    <View style={{flex: 1, backgroundColor: 'blue'}}> 
 
     <Text>c</Text> 
 
    </View> 
 
    </View> 
 
</View>