React Native 嵌套平面列表（垂直平面列表中的水平平面列表）答案

【问题标题】：React Native nested Flatlist (horizontal flatlist inside vertical flatlist)React Native 嵌套平面列表（垂直平面列表中的水平平面列表）
【发布时间】：2019-11-30 12:51:05
【问题描述】：

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

这是我目前拥有的：

  <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-native firebase-realtime-database react-native-flatlist

【解决方案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}

【讨论】：