javascript - ReactNative - NativeBase - 列表显示为网格

Question

我正在使用List从 NativeBase 渲染数据。我尝试过这样设置:

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

简单地在网格中显示“人员”。 Person 就是来自 NativeBase 的 Card:

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

但是这并没有像我预期的那样工作，并且 flexWrap 没有做任何事情。所有内容都呈现在一行中，而不是包装到网格中。

Answer 1

这对我有用:

用 View 包裹卡片:

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

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