React-Native 环境搭建中遇到的问题记录及成功分享

    公司开发的项目使用的是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了，

 最后一哆嗦~~~

灯光   摄像  准备    卡~！~   终于成功了~~

 

参考博客：

https://blog.csdn.net/DavisCZ/article/details/79072062

https://www.jianshu.com/p/5492d8f0d794