RN FlatList中的两列

Question

如何在React Native Flatlist中列出2列,例如:

Answer 1

只需将prop numColumns传递给FlatList组件即可.

Answer 2

标准样式react-native是flexDirection: 'col'，这意味着元素从上到下排列。要更改此设置（从右到左），您应该将 style 设置为flexDirection: 'row'。

<View style={{flexDirection: 'row'}}>
  <FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
  />
  <FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
  />
</View>