Question

我在下面做了一个布局：

<ScrollView style={{flexDirection:'row'}]>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
  <View style={{flex:1}}></View>
</ScrollView>

我希望每行有3列。但代码打印7列。

如何解决？

Answer 1

你拥有它的方式意味着7个视图将沿着该行占据相同的空间百分比。加上弹性数字会产生7.因此每个View将占据该行的1/7。

您可以通过两种方式寻求解决方案：

（1）将视图划分为包含在外部View

内的3个视图的组

（2）对flexWrap而不是percentages使用width和flex。

方法1

<View style={{ flex: 1 }}>
  <View style={{ flex: 1, flexDirection: 'row' }}>
    <View style={{ flex: 1 }}></View>
    <View style={{ flex: 1 }}></View>
    <View style={{ flex: 1 }}></View>
  </View>
  <View style={{ flex:1, flexDirection: 'row' }}>
    <View style={{ flex:1 }}></View>
    <View style={{ flex:1 }}></View>
    <View style={{ flex:1 }}></View> 
  </View>
  <View style={{ flex:1, flexDirection: 'row' }}>
    <View style={{ flex: 1 }}></View>
    <View style={{ flex: 1 }} />
    <View style={{ flex: 1 }}/>
  </View>
</View>

上述方法要求您在外部视图中包含三个视图，将flexDirection设置为每个外部视图的行，以便该容器内的项目各占据空间的1/3。请注意，您必须为最后一行硬编码两个额外的视图（除非您使用百分比width而不是flex个数字。）

方法2

<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
  <View style={{ width: '33.333%' }}></View>
</View>

在此方法中，您不使用flex号码。而是应用百分比宽度，对应于屏幕宽度的~33.33％。请注意，您需要将flexWrap样式属性设置为wrap。注意您需要为每个视图设置height，否则您可能看不到任何内容。

确保在开发和调试过程中将backgroundColor应用于上述不同的视图，否则您将无法看到正在发生的事情，因为它们都具有相同的背景颜色。

调整布局React Native

1 个答案: