像HTML这样的渲染组件

Question

基本上，我想在HTML中呈现像float左行为一样。因此，该组件将水平渲染（制作一行），直到没有足够的空间并在上一行下进行渲染。

const {card,insideCard} = styles; return( <View style={card}> <View style={insideCard}/> <View style={insideCard}/> <View style={insideCard}/> <View style={insideCard}/> </View> );

和样式

card:{ flex:1, backgroundColor:'#0000ff', margin:5, flexDirection:'row', }, insideCard:{ height: 80, width: 80, backgroundColor:'#000000', margin:10 }

当我渲染时，第四视图标签将被切成两半。有没有办法像HTML一样渲染它？因此，第四视图将自动呈现下行的视图？

非常感谢：）

Answer 1

将flexWrap: 'wrap'应用于您的card样式。如果您想处理对齐，请与justifyContent: 'center'

Answer 2

是的，您可以将FlexWrap属性设置为卡视图：

card:{
        flex:1,
        flexWrap:'wrap',
        backgroundColor:'#0000ff',
        margin:5,
        flexDirection:'row',
    },