如何修复使用withAuthenticator(App)时出现的渲染错误

问题原因 #

报错并非来自你自身业务代码的Picker引用，而是aws-amplify-react-native的旧版本内部硬编码依赖了React Native 0.60+版本后已经从核心库移除的Picker组件，所以即使你删除了自己代码里的Picker相关逻辑、安装了新的@react-native-picker/picker包，只要用了旧版withAuthenticator封装就会触发错误。

解决方案 #

按以下步骤操作即可解决：

• 优先升级相关依赖到适配版本
  最新稳定版的aws-amplify相关包已经将内部Picker替换为官方维护的@react-native-picker/picker，直接执行升级命令即可：

  # npm用户执行
  npm install aws-amplify@latest aws-amplify-react-native@latest
  # yarn用户执行
  yarn add aws-amplify@latest aws-amplify-react-native@latest
  

• 若因项目兼容问题无法升级大版本，可通过babel别名映射解决
  1. 先安装babel路径映射插件：

  npm install babel-plugin-module-resolver --save-dev
  

  2. 修改项目根目录的babel.config.js，添加别名配置，将aws包内部引用的旧Picker路径指向你已安装的新Picker包：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            'react-native/Libraries/Components/Picker/Picker': '@react-native-picker/picker',
          },
        },
      ],
    ],
  };
  

• 配置完成后清空缓存重启项目

  # 清空RN打包缓存重启服务
  npx react-native start --reset-cache
  # iOS用户还需要重新安装依赖
  cd ios && pod install && cd ..
  

如果你的Authenticator配置了自定义登录/注册下拉字段，需要把自定义字段里用到的Picker组件统一替换为@react-native-picker/picker导出的组件即可。

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