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

【问题标题】：Container with two columns: the first one with fixed width and the second one with flex grow具有两列的容器：第一个具有固定宽度，第二个具有 flex grow
【发布时间】：2021-09-02 22:15:57
【问题描述】：

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

这是我的代码：

<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 不起作用

【问题讨论】：

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

【解决方案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>

【讨论】：