Question

我正在尝试一个简单的布局。我有一个带有 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 增长 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 增长

1 个答案: