react-native - React Native 嵌套平面列表（垂直平面列表中的水平平面列表）

Question

我在垂直平面列表中有一个水平平面列表，我希望根据正在呈现外部平面列表的哪个项目来提供内部平面列表上的数据

这是我目前拥有的：

  <FlatList
    style={styles.outerFlatlist}
    data={this.state.catagories}

    renderItem={({item, index})=>{
return (
  <View>
    <View>
      <Text style={styles.catagoryName}>
        {item.CategoryName}
        </Text>
    </View>
    <View style={styles.innerFlatlist}>
      <FlatList
      horizontal={true} 
      data={this.state.product1}
      renderItem={({item, index})=>{
          return (
          <View 
          style={styles.productsContainer}>
            <View
            style={styles.productImage}>
             <Image 
             source={{uri:item.productImage}}
             style={styles.image}
             resizeMode='contain'>
            </Image>
          </View>
          <View style={styles.productDETAILS}>
            <Text 
            style={styles.productPrice}>R{item.productPrice}
            </Text>
            <Text 
            style={styles.productDescription}> 
                 {item.productDecription}
            </Text>
          </View>
          </View>
          );
          }}/>
        </View>
    </View>
);
}}/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

使用上面的代码，除了每个类别显示相同的数据（this.state.product1）之外，一切正常，我怎样才能使内部平面列表的数据依赖于外部平面列表上显示的项目？

标签： react-nativefirebase-realtime-databasereact-native-flatlist

Answer 1

当您在 .map 中时，您已经在 this.state.catagories 中，但是由于您始终将 this.state.product1 用于 flatlist2 ，因此您将始终得到相同的结果，因为 this.state.product1保持不变。

在 flatlist2 将数据更改为item.products或item.whateverYouNeedHereButArray

<View style={styles.innerFlatlist}>
      <FlatList
      horizontal={true} 
      data={item}