React Native和{flex:1}

手鼓

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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Flex 和布局 (React Native)

来自分类Dev

React Native: Setting flex:1 on a ScrollView contentContainerStyle causes overlapping of components

来自分类Dev

{flex:1}在React Native中无法正常工作

来自分类Dev

React Native中的多列和行Flex Box问题

来自分类Dev

Flex WebView在React Native中

来自分类Dev

React Native:在ScrollView contentContainerStyle上设置flex:1会导致组件重叠

来自分类Dev

流星和React Native

来自分类Dev

React Native对反向Flex方向的支持

来自分类Dev

容器内的多行-Flex-React-Native

来自分类Dev

React Native中的Flexbox'flex'属性

来自分类Dev

React Native,Flex Box 有问题

来自分类Dev

android native和react native之间的通信

来自分类Dev

React Native和require('http')

来自分类Dev

React Native和Firebase 3

来自分类Dev

React Native - android 和 iOS?

来自分类Dev

Promises 和 React Native 协助

来自分类Dev

结合React和React-Native

来自分类Dev

在 React 和 React Native 中使用模型

来自分类Dev

使用react-native中的flex使项目坚持到底

来自分类Dev

flex在react-native中的ScrollView中不起作用

来自分类Dev

React Native如何在Flex方向行内使用<br>

来自分类Dev

react-native:如何结合 react-native-router-flux 和 react-native-drawer?

来自分类Dev

区别React Typescript,React JavaScript和React Native?

来自分类Dev

React Native-NavigatorIOS和TabBarIOS实现

来自分类Dev

使用React Native搜索和过滤

来自分类Dev

在React Native中循环Json和显示

来自分类Dev

React Native和Parse.FacebookUtils

来自分类Dev

React Native中的Jest和异步存储

来自分类Dev

React Native:标签和堆栈导航集成