react-native-cli运行项目及打包apk失败的解决过程

刚开始学习react native,第一步自然是搭建好开发环境,node及jdk本身就有,Python2、Android studio以及Android sdk的安装倒是没什么大问题,按照官网的教程做就行了,还有Android studio我目前理解的是其实主要作用就是配置对应版本的安卓模拟器或者是安装sdk比较方便,

不过在项目正确跑起来之前确实也碰到一些问题,这里把自己的解决经历记录下来

问题一:react-native run-android的时候在download gradle的时候等了很久,然后就是提示失败,说是打包的时候出现了解压异常什么的问题,另外也提示说确认是否已经连接到可用的安卓设备什么的,捣腾了一会安卓模拟器发现我确实没有配置正确,因为Android studio默认的安卓模拟器是Android 9,但是官网说明目前应该使用Android 8.1,好吧那就新建一个,结果还是不行,然后考虑到每次运行的时候总是在提示说下载gradle-4.4-all.zip等待一段时间,所以我想可能就跟这个有关,网上查了一下还真有这个问题,其实就是下载超时,解决方式就是自己先下载好对应压缩包放到本地,然后修改配置文件把路径指向本地文件即可,

配置文件是项目目录下的android\gradle\wrapper\gradle-wrapper.properties,修改后内容如下,而且注意最好用相同版本,我开始就是下载别人博客下提供的链接,下载了比较旧的一个版本结果运行还是出错了,下载gradle访问http://services.gradle.org/distributions/即可,可以下载到各个版本的

distributionBase=GRADLE_USER_HOME

distributionPath=wrapper/dists

zipStoreBase=GRADLE_USER_HOME

zipStorePath=wrapper/dists

#distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

#指定本地文件代替原本网络下载

distributionUrl=file:///D:/android-sdk/gradle-4.4-all.zip

问题二:gradlew assembleRelease打包安装包出错,同样按照官网教程一步步做,前面的生成签名文件问题不大,但是最后运行gradlew assembleRelease的时候报错了,错误提示大概是说不能访问@babel\parser\.bin\parser这个目录的问题,我在node_modules下确实找到了这个文件夹,发现最终目录下是一个快捷方式,然后这个快捷方式确实打不开,感觉问题应该就出在babel这里,然后我看了一下项目的package.json,发现有这样一个包

metro-react-native-babel-preset

这应该是react基于babel封装的一个包,实现了react自身在转换js时需要进行的一些操作什么的,我心想换一个版本看看好不好用,

执行命令npm view metro-react-native-babel-preset versions查看该包的所有版本,嗯,确实之前有很多版本,而现在用的是最新的0.49.0,

那么先npm uninstall metro-react-native-babel-preset把原来的包卸载,

然后重新安装上一个版本,npm i --save-dev metro-react-native-babel-preset@0.48.3,命令中@指定版本确保安装0.48.3版本的包,安装完成重新执行打包命令gradlew assembleRelease

这一回执行没有出现异常,最后提示构建成功,项目目录下的android\app\build\outputs\apk\release目录也出现了最新的apk文件。

至此react native两个基本的操作即模拟器运行以及生产安装包可算是成功了,总结来讲主要的问题点是版本之间的兼容问题,新版本的某些行为特性改变或者是旧版本还未出现所使用到的行为特性,这都可能导致整体的运行异常