【2016-10-11】 React Natice 的项目搭建 windows版

很多移动开发者大概也有这样的一个痛楚，老板要求此模块比较能动态。怎么动态呢？就是不必发布一个APP新包，而是直接可以再后台配置改变，所谓的所配即所得吧。这样，大家就一股脑的用网页的形式来做，利用webview加载一个URL，轻松搞定。O(∩_∩)O~，，很抱歉，并没有那么想象的容易，虽然问题是解决了，但是原生webview在性能与体验方面很差，就举个栗子吧O(∩_∩)O~。之前我做的一个项目里面就嵌入了webview，在用wifi的情况下打开（wifi不是那么很稳定大部分好的，偶尔来个小脾气~~），发现很慢，是的，很慢，要好几秒，是的，要好几秒！而且出来的页面错位，是的，还错位了！或者说JS还未完全加载，CSS也可能掉了。O(∩_∩)O~，这些我都遇到过。是不是用户体验很差？那么问题来了，有什么好的解决方案吗？有啊O(∩_∩)O~，我帮你网上查了查，目前来说比较火的纯网页app  （webapp）  和混合app（hybrid），分别对应 ionic  和react native。各位看官，各位看官，终于要进入正题了。

第一步，先下载安装node.js

https://nodejs.org/en/

下载安装吧！安装完成请检查一下是否安装成功

cmd键+r    输入cmd 打开  命令窗口

命令       node -v                                        我的是最新的v6.2.0          

第二步，安装React Native 

这里用到了上一步的东西，node.js自带了npm 。npm 是node.js里的包管理工具，利用此工具可以安装我们需要的东西，不多说了，继续开车！

命令    npm install -g react-native-cli




在安装的过程有点慢慢，需要耐心等待几分钟。如果安装，到这里离成功不远了！！

这里需要说明一下，有些人还安装了python ，我不知道为什么要安装这个，为了保险起见，我们也安装一下，防止日后用到了再去安装，麻烦~~。

第三步 python安装

https://www.python.org/downloads/

安装记得勾选配置到环境里面选项

我们也要测试一下是否安装成功

命令 python 我的是最新的3.5.2

以上这些都是准备工作，看不到实际东西对吧。至少我们想要的东西还没见到。现在开始构建项目了

命令  react-native init MyProject init 后面接的是项目名字，你可以随便取




等待构建完成吧，也需要一两分钟。当构建完成后可以在  C:\Users\Administrator\MyReactNative  找到你构建的项目，到这里  只能说明项目构建成功了

还要测试安装呢 对吧

命令 cd C:\Users\Administrator\MyReactNative  进入当前项目

命令  

1. react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ 

先别急着回车   我们的在项目建一个文件夹 assets

然后回车  如果看到assets里面有下面两个文件  就成功了

命令  react-native run-android 这里 你得把你的手机连接上，因为要安装到手机里。 回车

手机显示 welcome to react native 则说明成功了。到此结束！

参考及感谢

http://www.2cto.com/kf/201605/511961.html

http://blog.youkuaiyun.com/b992379702b/article/details/52234479