如何在 React Native 中的 FlatList 中列出两个表中的数据答案

【问题标题】：How to list data from two tables in FlatList in React Native如何在 React Native 中的 FlatList 中列出两个表中的数据
【发布时间】：2021-06-29 21:25:38
【问题描述】：

我在 Firebase 中有两个表。我正在获取数据并将其存储在 USERS 和 CATES 状态中。现在，当我在 两个单独的 FlatList 中列出数据时，我的两个 FlatList 都会给我单独的滚动。但我只想要一个滚动整个页面。请帮忙。谢谢你

{/* **FlatList 1***/}

<View style={{ backgroundColor: '#fff', marginVertical: 10, borderRadius: 6, paddingBottom: 10 }}>
  <Text style={{ fontWeight: 'bold', color: '#dc3545', fontSize: 20, marginVertical: 5, marginHorizontal: 10, paddingVertical: 5 }}>Dishes</Text>
  <FlatList
    data={cates}
    numColumns={4}
    renderItem={({ item }) => (
      <TouchableOpacity style={{justifyContent:'center',alignSelf:'center',alignItems:'center',paddingVertical:5,}}>
      <Image source={{ uri: item.catIcon }} style={styles.dishBanner} />
      <Text
        style={styles.dishText}
      >{item.catName}</Text></TouchableOpacity>
    )}
  />
</View>

{/* **FlatList 2** */}
<View style={{flex:1 }}>
  <Text style={{ fontWeight: 'bold', color: '#dc3545', fontSize: 20, marginVertical: 5, marginHorizontal: 10, paddingVertical: 5 }}>Restaurants</Text>
  <FlatList
    data={users}
    renderItem={({ item }) => (
      <TouchableOpacity style={{backgroundColor: '#fff', borderRadius: 6, paddingBottom: 10, paddingTop: 10,marginBottom:10}}>
      <Image source={{ uri: item.RImage }} style={styles.resBanner} />
      <Text
        style={{ fontSize: 20, fontWeight: '500', textAlign: 'center', color: '#333', }}
      >{item.RName}</Text></TouchableOpacity>
    )}
  />
</View>

【问题讨论】：

我认为这里不应该使用 firebase / google cloud 标签。这更像是一个与 react / css 相关的问题。

标签： firebase react-native google-cloud-firestore

【解决方案1】：

您可以将这两个列表组合在一起，以使另一个列表显示为只有一个渲染项道具的单个 FlatList。如果数据代表相同物品的不同方面，则需要查看SectionLists

        <SectionList
          sections={DATA}
          keyExtractor={(item, index) => item + index}
          renderItem={({ item }) => <Item title={item} />}
          renderSectionHeader={({ section: { title } }) => (
            <Text style={styles.header}>{title}</Text>
          )}
        />

【讨论】：