同步AWS Amplify时遇无法解析模块aws-amplify-react-native，求解决方法

问题原因 #

AWS Amplify从v6版本（你的10.5.1属于v6系列）开始，已经将React Native的UI组件（包括withAuthenticator）从aws-amplify-react-native迁移到了@aws-amplify/ui-react-native官方包，旧包已被废弃，因此会出现模块无法解析的错误。

解决步骤 #

1. 更换依赖包 #

卸载旧的废弃包，安装新的官方UI组件包：

# npm 用户
npm uninstall aws-amplify-react-native
npm install @aws-amplify/ui-react-native

# yarn 用户
yarn remove aws-amplify-react-native
yarn add @aws-amplify/ui-react-native

2. 修改代码导入语句 #

将App.js中原来的导入代码：

import { withAuthenticator } from "aws-amplify-react-native";

替换为：

import { withAuthenticator } from "@aws-amplify/ui-react-native";
// 必须导入默认样式，否则认证UI会异常
import '@aws-amplify/ui-react-native/styles.css';

3. 清除缓存并重启项目 #

确保依赖完全生效，清除项目缓存后重启：

# Expo 项目
npx expo start --clear

# 普通 React Native 项目
npx react-native start --reset-cache

修改后的完整App.js示例 #

import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from "@react-navigation/native";
import RootNavigator from "./src/navigation/index";
import { Amplify } from "aws-amplify";
import config from "./src/aws-exports";
import { withAuthenticator } from "@aws-amplify/ui-react-native";
import '@aws-amplify/ui-react-native/styles.css';

Amplify.configure(config);

function App() {
  return (
    <NavigationContainer>
      <RootNavigator />
      <StatusBar style="light" />
    </NavigationContainer>
  );
}

export default withAuthenticator(App);

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