React Native 和 { flex: 1 }答案

【问题标题】：React Native and { flex: 1 }React Native 和 { flex: 1 }
【发布时间】：2017-02-21 10:15:20
【问题描述】：

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

我经常可以看到这些规则适用于不同的组件。有时这条规则显然是多余的。有时显然没有，但没有它，布局似乎工作得很好。

那么，这条规则到底应该做什么？

【问题讨论】：

标签： react-native flexbox

【解决方案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 有点令人困惑。但是一旦你掌握了窍门，你就会学会如何操作视图。

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

【讨论】：

【解决方案2】：

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

换句话说，您的布局应该使用flexbox 规则创建，而不是使用display: block 和各种floats。

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

具体来说，这条规则：

flex: 1

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

【讨论】：