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

Question

来自 example here 我想知道是否可以将无法放入一个项目的项目浮动到新行中？

<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 彩色项应换行。 flexbox 可以吗？

Answer 1

将flexWrap应用于根容器样式。

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

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

In react-native - how to float elements in new line when they can't fit into one?

layout

reactjs

react-native

react-native-flexbox