react-native - 如何水平包装 ScrollView 内容？

Question

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

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

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

我试过弄乱 ScrollView 及其子项的 flex 样式，但可惜，没有任何效果。我也尝试使用 horizontal={true}在 ScrollView 上，但这并没有达到环绕效果，我希望它可以垂直滚动。

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

<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"}}>
  ...