ReactNative 布局过程以及 flex 如何影响它？答案

【问题标题】：ReactNative Layout Process & how flex impacts it?ReactNative 布局过程以及 flex 如何影响它？
【发布时间】：2020-05-08 07:20:14
【问题描述】：

我试图了解为什么以下布局的工作方式不同。

有人可以根据规则解释内部布局过程是如何发生的吗？以及为什么下面的示例表现不同。除了只是说它是这样的。

示例 1：

return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
    <View style = {{borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>
    )

这会在文本周围呈现黑色框周围的红色框。这意味着 View 根据其内容调整大小。内部视图调整大小以考虑文本，外部视图考虑内部视图（已经考虑内部文本来确定其尺寸），因此一切都符合预期。

示例2：

return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
    <View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>
    )

文本现在位于两个视图之外。不过，内部视图仍然位于外部视图内部。

现在我尝试了一些不同的变化：

示例 3：

    return <View style = {{borderWidth:1, borderColor:'red', height:10}}>
        <View style = {{flex:1, borderWidth:1, borderColor:'black'}}>
        <Text>HelloWorld</Text>
        </View>
    </View>

这个渲染得好一点，即文本至少似乎在两个视图内开始。但仍然不如预期。

我的问题：

1) 在上述情况 #2 中，为什么文本会在两个视图之外流动？而内部视图仍然停留在外部？

某些内容是否可以超出其父视图的范围？只要我们没有为它提供特定的尺寸，父视图不应该扩展以包含它吗？

2)在情况 #3 中，事情的表现有点像预期的那样。文本在视图内部，但仍然溢出。

3）这种渲染在 ReactNative 内部是如何发生的？它如何确定上面这些视图的有效高度？

【问题讨论】：

标签： css react-native layout flexbox

【解决方案1】：

简单来说，在第二个的情况下，大纲行为不端，即：

<View style = {{borderWidth : 1, borderColor : 'red'}}>
    <View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>

是因为父View 组件没有flex 属性，所以它不会占用整个空间，并且由于您添加了flex:1 in the child View，它会尝试占用分配的整个空间，因此黑色边框占主导地位和 TestText 在它下面。

但是如果你提供 flex:1 ，给父 View 你会看到和没有给出 flex 一样的结构。试试看：

<View style = {{flex:1,borderWidth : 1, borderColor : 'red'}}>
    <View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>

希望对您有所帮助。如有疑问，请随意

【讨论】：

用另一个案例和特定查询更新了我的问题。还是没看清楚。

【解决方案2】：

flex 示例

flex: 1，强制孩子跟随父母的身高，“黑色视图”将填满“红色视图”的所有可用空间，即height:60。

<View style={{   borderColor: "red",     height: 60 }}>
  <View style={{ borderColor: "black", flex: 1 }}>
    <Text>HelloWorld</Text>
    ...
  </View>
</View>

不带 flex:1 的示例

在没有 flex 的情况下，“黑色视图”将占据其子级的所有空间，与父级的高度无关（“红色视图”）。

<View style={{   borderColor: "red",  height: 60 }}>
  <View style={{ borderColor: "black"  }}>
    <Text>HelloWorld</Text>
    ...
  </View>
</View>

【讨论】：

赞成澄清示例，但我正在寻找更多规则和优先级的答案。还更新了问题以更清楚地表达我的疑问。