React Native：如何在下一行显示内容而不是关闭视图

Question

我正在构建一个 React Native 应用程序，并尝试在一行中呈现多个框。问题是，渲染的盒子的数量可能会根据不同的情况而有所不同，因此在某些情况下，盒子的数量太大而超出了它们正在渲染的视图的末尾（盒子不换行到下一个视图中的线，我希望他们这样做）。我用来执行此操作的代码如下所示：

<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 size。

<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>