flex: 1
为许多React Native组件设置规则的确切目的是什么?
我经常看到此规则适用于不同的组件。有时,这条规则显然是多余的。有时显然没有,但是没有它,布局似乎可以很好地工作。
那么,该规则到底想做什么?
如果不使用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有点令人困惑。但是,一旦掌握了这些要点,就将学习如何操纵视图。
编辑:始终用父组件包装子组件,以避免潜在的运行时错误。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句