Expo开发React Native跳转屏幕报props.getItem未定义错误如何解决

核心问题1：Babel配置不匹配 #

你当前使用的module:metro-react-native-babel-preset是原生React Native项目的Babel预设，不适用于Expo项目，会导致FlatList等内置RN组件的内置props（比如getItem）注入失败，触发你碰到的报错。

核心问题2：依赖版本与Expo SDK不兼容 #

你使用npm upgrade --latest升级了依赖，部分依赖版本和你当前使用的Expo SDK 42不匹配，比如react-native-web@0.17.1远高于SDK42适配的版本，会引发组件渲染异常。

修复步骤 #

• 修改babel.config.js配置，替换预设为Expo官方推荐的配置：

module.exports = {
    presets: ['babel-preset-expo'],
    plugins: [
      ["@babel/plugin-proposal-private-methods", { "loose": true }],
      'react-native-reanimated/plugin'
    ],
};

如果提示缺少babel-preset-expo，执行npm install babel-preset-expo --save-dev安装即可。

• 给Modal组件里的FlatList补充keyExtractor属性，避免潜在的渲染异常：

<FlatList
    data={BUTTONS}
    renderItem={renderButton}                        
    numColumns={2}
    keyExtractor={(item) => item.id}
/>

• 卸载不兼容的依赖，重装匹配版本：

1. 删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件
2. 执行npm install重新安装基础依赖
3. 执行expo install react-native-web安装适配SDK42的对应版本依赖，后续所有依赖安装都用expo install替代npm install，自动匹配版本

• 清空缓存启动项目：执行expo start --clear启动，完全清空本地编译缓存后测试问题是否解决。

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