最近以React Native技术开发App应用,搭建项目时遇到坑颇多,网上查找解决方法费时,费精力,总结一些问题,希望能对读者有所帮助。
这次遇见的问题是babel编译ES6源码时,抛出的异常,导致无法启动项目,执行react-native run-ios
,启动模拟器后报错:
可以看到,有用的信息:Error bundling Cannot find module @babel/core,而使用react-native-cli
创建的React Native App应用使用的是babel预设方案:babel-preset-react-native
,这是它的最新版本的一个bug,我们可以将其版本退回至2.1.0
,首先删除它(使用yarn或npm进行安装包管理皆可):
yarn remove babel-preset-react-native
or
npm unstall babel-preset-react-native
复制代码
然后安装指定版本:
yarn add --dev babel-preset-react-native@2.1.0
or
npm install --save-dev babel-preset-react-native@2.1.0
复制代码
最后,再次启动应用:
react-native run-ios
or
react-native run-android
复制代码
应用正常运行。
React Native 版本问题
当然也许你还会遇到一个异常:
这个问题是由于最新React Native版本,需要Xcode版本大于9,Mac OS大于11,所以可以将React Native版本将至0.53.3
:
react-native init myApp --version 0.53.3
复制代码
Babel preset版本问题
前面对于babel编译问题,指出将版本回降至2.1.0
,正常是没有问题的,但是如果使用了ES6新语法generator
时,需要注意,下面这种export
导出写法,将会报错:
export default function * root () {
yield ...
}
复制代码
需要改成如下导出方式,先赋值再导出:
const root = function * root () {
yield ...
}
export default root;
复制代码
当然,如果不希望修改代码,则需要将babel-preset-react-native
版本降至2.0.0
:
rm -rf ./node_modules
yarn cache clean or npm cache clean
yarn add --dev babel-preset-react-native@2.0.0
yarn install
watchman watch-del-all // 如果使用了watchman
复制代码
然后杀掉上次应用启动的进程,重新启动应用,即可正常编译,运行:
react-native run-ios
复制代码