ReactNative - NativeBase - 將列表顯示爲網格

Question

我使用NativeBase中的List來呈現數據。 我試圖建立這樣的：

   body = <List 
        dataArray={data} 
        renderRow={(rowData) => 
         <Person 
          key={rowData.ID} 
          searchText={searchText} 
          person={rowData} 
          onSelect={this.onSelect} 
         />} 
        onEndReached={this.onEndReached} 
        onEndReachedThreshold={10} 
        contentContainerStyle={{ 
         flex: 1, 
         justifyContent: 'center', 
         flexDirection: 'row', 
         flexWrap: 'wrap', 
         alignItems: 'flex-start'}} 
       /> 

簡單地在網格顯示「人」。人是簡單的卡從NativeBase：

<Card style={{width: deviceWidth>320 ? 320 : deviceWidth,flexGrow: 1}}> 
      ... 
      </Card> 

但是，這不工作，因爲我預期和flexWrap沒有做任何事情。一切都呈現在一行而不是包裝到網格中。

Answer 1

這爲我工作：

包住卡有一個觀點：

<View style={ styles.itemStyle} > 
 
    <Card> 
 
    <CardItem> 
 
     ..... 
 
    </CardItem> 
 
    </Card> 
 
<View> 
 

 
const styles = { 
 
    itemStyle: 
 
    width: 150, 
 
    height: 100 
 
}