React Native中Amplify认证Expo Go网页端正常，iOS/Android端报错求助

问题根源 #

你误用了Web版Amplify UI组件库（@aws-amplify/ui-react），该库是为React Web应用设计的，内部渲染的文本未按React Native要求包裹在<Text>组件中，因此在iOS/Android端触发渲染错误；而Web端无文本必须包裹的限制，所以能正常运行。

解决方案 #

1. 替换UI组件依赖 #

卸载Web版库，安装React Native专属的Amplify UI包：

npm uninstall @aws-amplify/ui-react
npm install @aws-amplify/ui-react-native @aws-amplify/react-native

2. 修改代码中的导入语句 #

将Web版withAuthenticator替换为Native版本：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import { Amplify } from 'aws-amplify';
// 替换为React Native专属的withAuthenticator
import { withAuthenticator } from '@aws-amplify/ui-react-native';
import amplifyconfig from './src/amplifyconfiguration.json';

Amplify.configure(amplifyconfig);

import HomeScreen from './Screens/Home';
import DetailsScreen from './Screens/Details';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home" >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default withAuthenticator(App);

3. 确保依赖完整性 #

对于Expo项目，补充安装必要的原生适配依赖：

npx expo install @aws-amplify/react-native aws-amplify

补充说明 #

React Native与React Web的Amplify UI组件是独立维护的，必须对应使用正确的包。替换后，Native端的认证界面会自动遵循React Native的组件规范，不再出现文本渲染错误。

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