React-Native网格样式

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>

- ＆GT; I want to (IMAGE)

可以使用＆＃34; react-native-easy-grid＆＃34;库。

但是，可以在不使用此库和上述代码结构的情况下执行此操作。不使用行和列。

只能通过指定高度和宽度值来实现自动放置吗？

Answer 1

您可以使用flexbox实现此目的：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;