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 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 s您的布局应使用flexbox规则创建。

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

具体来说，该规则：

flex: 1 

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