Question

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

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

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

Answer 1

如果组件在不使用flex: 1的情况下呈现正常，则显然不需要它。您可能还想删除不需要的样式。 flex: 1所做的是它告诉组件占用尽可能多的空间。

例如：

<View style={{ flex: 1, backgroundColor: '#cccccc' }}>
    <Text>Hi</Text>
</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有点令人困惑。但是一旦掌握了它，你就会学会如何操纵视图。

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

Answer 2

对于布局，React Native使用flexbox，因为display: flex;非常适合在各种屏幕尺寸和设备上创建响应式布局。所有属性名称和值都列在React Native docs。

中

换句话说，不应使用display: block与float个flexbox，而应使用flex: 1规则创建布局。

Modus Create在Flexbox in React Native上做了很好的教程。

具体而言，该规则：

{{1}}

告诉元素增长以填充可用空间。

React Native和{flex：1}

2 个答案: