根据官方文档,需要在Expo应用中配置Babel插件来解决这个问题。具体步骤如下:
安装 babel-plugin-module-resolver:
npm install babel-plugin-module-resolver --save-dev
为babel添加 module-resolver 插件,可以在 .babelrc
文件中添加以下内容:
{
"plugins": [
["module-resolver", {
"alias": {
"aws-amplify-react-native": "amazon-cognito-identity-js",
"aws-amplify-angular": "amazon-cognito-identity-js"
}
}]
]
}
这个配置可以解決AWS Amplify的库的问题。
整个 .babelrc
文件应该如下所示:
{
"presets": ["babel-preset-expo"],
"plugins": [
["module-resolver", {
"alias": {
"aws-amplify-react-native": "amazon-cognito-identity-js",
"aws-amplify-angular": "amazon-cognito-identity-js"
}
}]
]
}
最后,确保您的项目可以访问来自amazon-cognito-identity-js
的模块。
备注:如果您的项目未使用.babelrc
文件,您也可以在您的 App.js
文件中手动添加Babel配置。 以下内容只是作为参考,您可以更改这些内容以适应您的应用程序需求:
import { ExpoConfigView } from '@expo/samples';
import Amplify from 'aws-amplify';
import config from './aws-exports';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
/**
* 参考文献
* https://docs.amplify.aws/start/getting-started/setup/q/integration/react-native#option-2-follow-the-instruction-to-add-dependencies-manually-advanced-users-only
*/
Amplify.configure(config);
export default class App extends React.Component {
render() {
return (
Edit the app/App.js file to change this screen and then come back to see your edits.
{instructions}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
intro: {
fontSize: 18,
marginHorizontal: 15,
textAlign: 'center',
},
});
借助上面给出的修复解决方案,您现在就可以愉快地使用 AWS Amplify 库来构建React Native应用程序了。