在 react-native 中 - 当元素无法放入新行时，如何在新行中浮动元素？

Question

从这里的例子中，我想知道当项目无法放入新行时是否可以将项目浮动到新行中？

<View style={{flex: 1, flexDirection: 'row'}}>
  <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'green'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>

blue颜色的项目应位于新行中。弹性框可以吗？

Answer 1

将flexWrap应用于根容器样式。

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