Question

我想水平显示ScrollView的内容，并让它们在碰到右边缘时换行。例如，

|One Two Three Four Five|
|Six Seven Eight Nine   |
|Ten                    |
|                       |

其中垂直管道是屏幕的边缘。

我尝试弄乱ScrollView及其子级的flex样式，但是，没有任何效果。我还尝试在ScrollView上使用horizontal={true}，但是并不能实现环绕效果，我希望它可以垂直滚动。

这是我的代码的简化版本：

<ScrollView style={{flex: 1, flexDirection: "row", flexWrap: "wrap"}}>
  <View><Text>One</Text></View>
  <View><Text>Two</Text></View>
  <View><Text>Three</Text></View>
  ...
  <View><Text>Ten</Text></View>
</ScrollView>

这就是代码所产生的。

|One                    |
|Two                    |
|Three                  |
|Four                   |
|Five                   |
|Six                    |
|Seven                  |
|Eight                  |
|Nine                   |
|Ten                    |
|                       |

关于如何实现我想要的效果的想法将不胜感激。谢谢！

Answer 1

您只需要在contentContainerStyle上使用ScrollView而不是style

<ScrollView contentContainerStyle={{flex: 1, flexDirection: "row", flexWrap: "wrap"}}>
  ...

如何水平包装ScrollView内容？

1 个答案: