像HTML一樣渲染組件

Question

基本上我想渲染一個組件，如HTML中的左浮動行爲。所以組件會水平渲染（成行），直到沒有足夠的空間並將其渲染到前一行。

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', 
    },