调整布局本机反应

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个视图将占据行中相同比例的空间。将flex数字相加产生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。Note您需要为每个视图设置height，否则您可能什么也看不到。

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