1

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

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],
  },
});

在模拟器中渲染：

弹性尺寸示例

4

1 回答 1

3

您基本上是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>

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

于 2016-08-18T17:21:19.810 回答