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 
 
}