具有两列的容器：第一列具有固定宽度，第二列具有 flex grow

Question

我正在尝试一个简单的布局。我有一个带有 flexDirection = row 的视图容器。第一列应包含固定宽度的图像，第二列应包含大量文本。

这是我的代码：

<View
  style={{
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 4,
    backgroundColor: 'white',
    flexDirection: 'row',
    height: 111,
    marginBottom: 15,
  }}>
  <View
    style={{
      width: 120,
      height: '100%',
      backgroundColor: 'tomato',
      borderRadius: 4,
    }}
  />

  <View
    style={{
      flexGrow: 1,
      borderColor: 'gold',
      borderWidth: 3,
      // width: '100%',
    }}>
    <Text style={{fontWeight: 'bold', width: '100%'}}>Lorem ipsum dolor sit amet</Text>
    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
  </View>
</View>

结果：

为什么右边的容器尺寸不正确？好像 flex grow 1 不起作用

Answer 1

不要为父视图指定固定高度。我也对样式做了一些更改。请检查。

<View
        style={{
            borderColor: 'black',
            borderWidth: 1,
            borderRadius: 4,
            backgroundColor: 'white',
            flexDirection: 'row',
            marginBottom: 15,
        }}>
        <View
            style={{
                width: 120,
                height: '100%',
                backgroundColor: 'tomato',
                borderRadius: 4,
            }}
        />

        <View
            style={{
                borderColor: 'gold',
                borderWidth: 3,
                width: 0,
                flexGrow: 1,
                flex: 1,
            }}>

            <Text style={{ flexWrap: 'wrap' }}>Lorem ipsum dolor sit amet, consectetur sahesh elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est mahesh.</Text>
        </View>
    </View>

具有两列的容器：第一列具有固定宽度，第二列具有 flex grow

Container with two columns: the first one with fixed width and the second one with flex grow

flexbox

react-native

react-native-flexbox