React Native和{flex:1}

Question

将规则设置flex: 1为许多React Native组件的确切目的是什么？

我经常可以看到这些规则适用于不同的组件.有时这个规则显然多余.有时没有明显的,但没有它,布局似乎运作良好.

那么,这条规则究竟应该做什么呢？

Answer 1

如果组件在不使用的情况下呈现正常flex: 1,则显然不需要它.您可能还想删除不需要的样式.是什么flex: 1做的是,它告诉组件占据尽可能多的空间,因为它可以.

例如:

<View style={{ flex: 1, backgroundColor: '#cccccc' }}>
    <Text>Hi</Text>
</View>

这将跨越整个屏幕.

但是,如果将另一个View放在DOM中的同一级别,则两个视图将占用相等的空间,即屏幕将分为两部分.

像这样:

<View style={{ flex: 1 }}>
    <View style={{ flex: 1, backgroundColor: '#cccccc' }}>
        <Text>View one</Text>
    </View>
    <View style={{ flex: 1, backgroundColor: '#eaeaea' }}>
        <Text>View two</Text>
    </View>
</View>

我同意flexbox有点令人困惑.但是一旦掌握了它,你就会学会如何操纵视图.

编辑:始终使用父组件包装子组件,以避免潜在的运行时错误.