React Native Stylesheet:{flex:1}做什么？

Question

React Native使用flexbox进行布局.在我看过的所有例子中,他们做了这样的事情:

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  }
});

我很好奇这个flex: 1部分.根据Chris Coyier的定义https://css-tricks.com/snippets/css/a-guide-to-flexbox/,flex: 1应该是相同的flex-grow: 1,但对我来说,它看起来像flex: 1在React Native中相当于display: flexCSS.

这是一个CodePen,它演示flex: 1了React Native示例使用它的方式在CSS中没有做任何事情:

http://codepen.io/johnnyo/pen/BoKbpb

直到我们display: flex在CSS中使用,直到flexbox开始工作:

http://codepen.io/johnnyo/pen/epZXgz

那么这是否意味着flex: 1React Native相当于display: flexCSS？

Answer 1

css flexbox与Facebook实现的有很大不同.很多共同点,但默认值是非常不同的.特别:

Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.

flex:属性仅在相同级别使用时,几乎没有具有不同弹性值的组件(flex:1,flex:3)意味着第二个元素应该比第一个元素大3倍.flex属性是唯一受支持的属性(无增长/缩小支持).

更多信息:https://github.com/facebook/css-layout

Answer 2

Jarek Potiuk回答的一句话:'flex:1'确实做出了类似于flex-grow行为的本地反应.即使它是唯一一个flex:defined.

诸如flexDirection,alignItems,justifyContent之类的样式都定义了元素子元素的样式.类似于CSS Display:flex,它也定义了子项.

相反,flex:x定义元素本身.

例如,如果容器组件具有flexDirection:'row',则alignItems:'center'
并且有3 个子节点:

孩子1的宽度为50

child 2有flex 1(或任何其他数字,但1是常见做法)

孩子3的宽度为50

然后中间组件将"拉伸",以便3个孩子一起填充父组件的整个宽度.

Answer 3

很多教程都使用flex: 1,就像你在你的例子中所做的那样.主要的原因是因为有时(具体取决于元素,如ListStyle默认情况下,如果我没有记错)的组件将不会占据整个屏幕/地区,如果你不定义尺寸,如高度(例如.height: '400px') .Flex:非常棒,因为它可以保持各种尺寸的响应.

但我应该注意,对于没有兄弟姐妹的任何组件,flex的值完全是任意的.防爆.对于你的顶级组件,你可以说它flex: 43254315和它做同样的事情flex: 1.它只是意味着"占据整个空间"(无论"整个"是什么).

另一方面,如果你有一些兄弟组件,那么flex值很重要.例如,如果一个组件是flex: 2另一个组件flex: 3,则第一个占用屏幕的2/5,第二个占用屏幕的3/5.

简而言之:根据您的样式,它可能看起来像是flex: 1一样display: flex,但这只是因为您在示例中使用它的方式.如果你只是给它一些兄弟姐妹,你会发现它的行为完全不同.

Answer 4

和你一样,我很难理解这个在Facebook Code上没有正确记录的标签,但我最终发现它做了两件事:

1. 容器flex会将具有属性的任何子项视为高度为0,以确定它们占用的空间大小.
2. 具有flex: X扩展的组件可以在布置其他组件之后占用其容器中剩余的任何空间.他们与X值成比例地分享这个额外的空间.

第一项是为什么flex: 1看起来具有相同的效果display: flex.考虑以下JSX代码:

<ExampleAppContainer>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        But I don't :(
    </Text>
</ExampleAppContainer>

只打印第一个文本组件,因为第二个文本组件的高度为0. ExampleAppContainer为第一个文本组件分配足够的空间,并且第二个文本组件没有任何扩展空间.

现在考虑这段代码:

<ExampleAppContainer style={{flex:1}}>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        And so do I!
    </Text>
</ExampleAppContainer>

从那ExampleAppContainer以后flex: 1,它扩大到占用尽可能多的空间.假设它是应用程序的React部分的根组件,这通常是整个电话屏幕.接下来,它为第一个文本组件分配足够的空间,并允许第二个文本组件展开,占用屏幕的其余部分.

通过这种方式,您通常需要在flex: 1组件层次结构中一直应用,以便让最里面的组件有足够的flex: N空间进行正确扩展.

Answer 5

flex: 1

1. 告诉组件填充所有可用空间（在具有相同父级的其他组件之间共享）。

2. 如果存在flex具有值的同级组件，则其父级组件需要具有flex: 1（或更高）。如果父级没有固定的宽度和高度或 Flex，则父级的尺寸将为 0，并且 Flex 子级将不可见。