React Native 中的 Flexbox 'flex' 属性

Question

我正在通过精彩的 ReactNativeKatas 学习 React Native 中的 flexbox 布局。在下面的示例中，父 View（使用 styles.container 的那个）的两个子视图上的 flex 属性设置为 0.1。将两者都设置为 0.1 会将第一个 View 置于显示的绝对左侧，将第二个 View 置于中间。为什么将 0.1 设置为两个 View 的 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],
  },
});

在模拟器中呈现：

Answer 1

您基本上是在屏幕上均匀渲染两个 Views。由于 children Views 具有相同的颜色 (backgroundColor: color[1])，因此它们看起来好像是一个连续的背景。

发生的事情是您在 children 视图中渲染的所有框，它们在 parent 的 flex-start 处渲染。所以第一个 child 的盒子被渲染成垂直堆叠的。现在第二个 child 必须与第一个共享相等的 space。所以它从您放置的屏幕的 "middle" 开始。

为了更好地形象化这一点，我建议您注释掉容器下的整个内容并尝试渲染它：

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

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

React Native 中的 Flexbox 'flex' 属性

Flexbox 'flex' property in React Native

flexbox

react-native

react-native-flexbox