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

这将跨越整个屏幕。

但是，如果您在 DOM 中的同一级别放置另一个 View ，则两个 View 将占用相等的空间，即屏幕将分为两部分。

像这样:

<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 有点令人困惑。但是一旦掌握了窍门，您就会学习如何操作 View 。

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