firebase - 如何在 React Native 中的 FlatList 中列出两个表中的数据

Question

我在 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>

标签： firebasereact-nativegoogle-cloud-firestore

Answer 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>
          )}
        />