React Native 0.65.1运行FlatList官方示例报props.getItem未定义错误

报错根本原因 #

该报错是FlatList底层依赖的VirtualizedList组件未获取到必填的getItem属性导致。正常使用官方FlatList时，getItem会由FlatList内部基于传入的data自动生成，无需开发者手动传入，出现该问题都是以下场景导致：

解决方案 #

• 排查FlatList导入来源
  若项目中安装了react-native-gesture-handler库，大概率是错误从该库导入FlatList而非从react-native官方包导入。你提供的代码导入语句是正确的，需确认是否存在全局导入替换、别名配置错误等问题，保证所有FlatList都从react-native包导入。
• 清理项目缓存重新编译
  React Native 0.65版本存在metro缓存残留导致属性传递异常的问题，按以下步骤清理后重新运行即可解决：
  1. 终止当前运行的metro服务
  2. 执行清理命令：

  # 清理依赖并重新安装
  rm -rf node_modules && yarn install
  # 清理iOS依赖（安卓可跳过该步骤）
  rm -rf ios/Pods && rm ios/Podfile.lock && cd ios && pod install && cd ..
  # 启动metro并清空缓存
  yarn start --reset-cache
  

  3. 重新打包运行应用
• 手动补全属性兜底
  若上述方案均无效，可手动给FlatList传入getItem和getItemCount属性，绕过内部自动生成逻辑，修改后的FlatList代码如下：

  <FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.id}
    // 手动传入两个必填属性解决报错
    getItem={(data, index) => data[index]}
    getItemCount={(data) => data.length}
  />
  

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