React Native嵌套FlatList渲染空白、子项key值不显示问题求助

1. 核心问题：renderItem参数使用错误 #

FlatList 传给 renderItem 的回调参数是一个包含 item、index、separators 三个字段的总对象，你当前的写法直接把这个总对象命名为 item，因此：

• 你能拿到 item.index 是因为 index 是总对象的顶层属性
• 你要的 key 属于你自定义的数组单条数据，存放在总对象的 item 属性下，你当前写的 item.key 不存在，自然无法显示
  直接修改 renderItem 的参数解构即可解决：

// 解构回调参数，直接拿到单条数据和索引
const renderItem = ({item, index}) => {
  return (
    <View>
      <Text style={styles.item}>
        {index}
        {item.key}
      </Text>
    </View>
  )
}

2. 嵌套FlatList的额外适配 #

因为你的Card组件本身是被外层FlatList渲染的，属于垂直列表嵌套垂直列表的场景，需要给内部FlatList加两个属性避免渲染异常、手势冲突：

<FlatList
  data={listData}
  renderItem={renderItem}
  keyExtractor={(item)=> item.key}
  scrollEnabled={false} // 关闭内部列表滚动，避免和外层列表手势冲突
  contentContainerStyle={{flexGrow: 0}} // 强制内部列表自适应内容高度，不会异常撑满父容器
/>

3. 可选优化：列表数据组装简化 #

你当前组装 listData 的逻辑可以用 map 简化，代码更简洁：

const listData = genres.map(genre => ({key: genres_list[genre]}))

内容的提问来源于stack exchange，提问作者SaltyCode