公司开发的项目使用的是React-Native,所以,无奈之下,我入坑了~~~~重要的事情说三遍~ 我入坑了~~入坑了~~入坑了~~~,别人急着脱坑,而我,为了生存,我踩入了这个大坑。
入门阶段就是React-Native+Android studio 搭建环境,光这个环境,我整整的研究了一整天,通过google和之前玩儿Android studio的一些基础终于整出来了。(React-Native让我讨厌上了红色)
因为自己看的视频都是比较早的教学视频,所以按照视频中的方法,根本行不通,因为react-native已经升级版本了,就是因为版本的问题,在坑里迟迟不能出来。
下面就进入正题吧,把自己遇到的问题,记录分享一下。
首先就是安装项目所需的环境,什么node.js、npm、git、等等一下环境,这些环境安装都是傻瓜式的安装,可以参考一下这个教学文章,鄙人也是通过阅读这边教程一步步来的。————React-native中文网这里面会告诉你需要安装什么环境。在这个过程中安装Android studio 可能会如上文所说的因为网络的问题,遇到很多的坑,不过我很庆幸,公司的网络环境还不错,因为以前也捣鼓过Android studio ,所以很快的就安装完了Android studio 。
看黑板,划重点。根据上面的教程,走到了使用react-native init XXX项目名 的时候,这个时候一定要根据自己现在所用的所有的环境的版本信息,后面带着react-native的版本号。
因为react-native
更新太快,每次react-native init
初始化项目的时候,都会安装最新的rn版本,导致之前的一些api不兼容等问题。
所以我们需要安装指定版本的rn来初始化项目:
$ react-native init demo --version 0.36.1
如鄙人这里安装的是0.50.0的版本
开始初始化项目
项目初始化完成后进入到项目的根目录,npm install 安装依赖,这里也很考验你的网络环境。有时候可能需要等很久。
用 visio studio code 打开项目,项目的结构如图
可能有人会说,咋和我创建的项目结构不一样啊,我的是这样的,如下图
我的目录里有index.android.js 和index.ios.js 而你创建的项目里没有,没错,我说的就是这个,这个问题也是折磨我好就,这也吃亏在我们有好好看人家的文档,在版本的更新后,现在的入口文件统一为index.js,创建的项目中不会再出现index.android.js文件,这一步也影响到后面的操作。这里会报错,报的错就是你执行react-native start的命令的时候,他会告诉你,项目中没有此文件,更新后的版本应该是这样的。继续上面的操作。
npm install命令执行完之后,有人就会急着执行react-native run-android的操作来调试。那么你就会遇到下面的问题。https://www.cnblogs.com/marylee/p/7698640.html。我感觉这位博主总结的还是比较全面的,有遇到对应问题的,可以解决一下。这里是旧版本中的遇到问题的解决方案。
继续按照新版本的思路往下走, npm install命令执行完之后,进入 项目名\android\app\src\main 下创建assets文件夹,命令行再切换到项目根目录下 执行
react-native bundle --platform android --dev false
--entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
这里和上文中的解决方案不一样在 index.js 也就是入口文件的地方。执行上面的命令就是为了在文件夹中创建两个文件。
如下图
执行成功后
这里可能会遇到的错误就是,执行命令之后,他会显示XXXXXXX一堆,然后给你三种解决方案,1,2,3,第二种方案是让你移除node_moudles模块&&npm install ,然后我们需要做的就是在项目中删除node_moudles,重新再执行一遍npm install 再执行一遍上边的命令,就会成功了。
命令行切换到项目的根目录下,执行react-native start 命令,这里执行之后,可能会出现命令执行停止不动的情况,在浏览器中访问http://localhost:8081/index.bundle?platform=android&dev=true&hot=false&minify=false ,窗口返回数据,不报错,如下
你会发现刚才卡着的地方,开始动了,如下所示,说明我们的服务端开启成功。
不要关闭浏览器的窗口,重新开启一个命令行窗口,进入项目的根目录,这次可以执行react-native run-android了,
最后一哆嗦~~~
灯光 摄像 准备 卡~!~ 终于成功了~~
参考博客: