React Native 中的 Flexbox 'flex' 属性答案

【问题标题】：Flexbox 'flex' property in React NativeReact Native 中的 Flexbox 'flex' 属性
【发布时间】：2016-08-18 15:34:46
【问题描述】：

我正在通过精彩的 ReactNativeKatas 学习 React Native 中的 flexbox 布局。在下面的示例中，父View（使用styles.container 的那个）的两个子视图上的flex 属性设置为0.1。将两者都设置为 0.1 会将第一个 View 放在显示屏的绝对左侧，将第二个 View 放在中间。为什么将0.1 设置为两个Views 的flex 属性会以这种方式对齐它们？

const FlexSize= (props)=>{
  return (
    <View style={styles.container}>
      <View style={{flex: 0.1}}>
        <Box style={{flex: 0.7}}/>
        <Box style={{backgroundColor:'yellow'}}/>
        <Box/>
        <Box style={{flex: 0.3, backgroundColor:'yellow'}}/>
      </View>
      <View style={{flex: 0.1}}>
        <Box style={{flex: 0.5}}/>
        <Box style={{backgroundColor:'yellow'}}/>
        <Box/>
        <Box style={{flex: 0.5, backgroundColor:'yellow'}}/>
      </View>
    </View>
  )
}


const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection:'row',
    backgroundColor: colors[1],
  },
});

在模拟器中渲染：

【问题讨论】：

你能用这段代码分享一下它在模拟器上的样子吗？容器视图的两个子级具有相等的flex。所以它们应该均匀对齐，将整个屏幕垂直分成两半。
@nabn 我已经编辑了消息以包含它在模拟器中如何呈现的图像。

标签： react-native flexbox react-native-flexbox

【解决方案1】：

您基本上是在屏幕上平均渲染两个Views。由于两个子视图具有相同的颜色 (backgroundColor: color[1])，因此它们似乎是一个连续的背景。

正在发生的事情是您在子视图中呈现的所有框，这些框在其父视图的flex-start 处呈现。所以第一个孩子的盒子被垂直堆叠渲染。现在第二个孩子必须与第一个孩子共享相同的空间。因此，正如您所说，它从屏幕的“中间”开始。

为了更好地可视化这一点，我建议您将容器下的整个内容注释掉，然后尝试渲染它：

<View style={styles.container>
  <View style={{flex: 0.1, backgroundColor='red'}} ></View>
  <View style={{flex: 0.1, backgroundColor='blue'}} ></View>
</View>

您会看到这些视图是如何在您的屏幕上堆积起来的（请注意，您的 container 中有 flexDirection: row。所有的框都相应地堆积起来。我希望您能得到解释。

【讨论】：