React Native:如何在下一行显示内容而不是离开视图

Question

我正在构建一个反应本机应用程序，并试图在一行中呈现许多框。问题是，渲染的框数可以根据不同的情况而变化，因此在某些情况下，框的数量太大，因此超过了渲染它们的视图的末尾(框不会换行到视图中的下一行，我希望它们这样做(。我用来执行此操作的代码如下所示：

<View style={{height: '100%', width:'100%', flexDirection: 'row', flexWrap: 'wrap', justifyContent:'flex-start'}}>
{props.boxes.map((element, index) => {
return (
<View key={index} style={{flexDirection:'row'}}>
<Box color={color}/>
<Text>Some Text Here</Text>
</View>
)
})}
</View>

我可以添加什么属性以使框在到达视图边缘时环绕到视图的下一行？谢谢！

Answer 1

使用 ：

style={{flex: 1, flexWrap: 'wrap'}}

或

flexShrink: 1而不是flex:1.

这已经是一个错误，使用上述任何答案都应该可以解决您的问题。 尝试玩width尺寸。

<Text style={{flex: 1, flexWrap: 'wrap'}}> Some Text Here Some Text Here Some Text Here Some Text Here Some Text Here Some Text Here Some Text Here Some Text Here
</Text>