React-Navite–ES6学习笔记（1）–了解与环境安装

React-Navite–ES6学习笔记（1）–了解与环境安装

1.快速学习React

先学习一下React.js的使用，可以快速了解，传送门 》》》React 入门实例教程

2.了解JSX EX6是什么鬼？

你需要了解ES2015 （也叫作ES6）——这是一套对JavaScript的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现，所以目前而言web开发中还很少使用。React Native内置了对ES2015标准的支持，你可以放心使用而无需担心兼容性问题。上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是ES2015中的特性。如果你不熟悉ES2015的话，可以看看 [阮一峰老师的书 ]

3.安装React-Native运行环境

如何安装？
传送门

1. [搭建开发环境（官方搭建方式） ]

2. [ReactNative环境搭建（Windows+Android Studio） ]

一、安装JDK+Android Studio +SDK+Gradle（不会自行百度）

二、安装C++环境

TDM-GCC-64、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。

三、安装msysgit

从github clone项目使用到

四、安装Python

从官网下载并安装python 2.7.x

五、安装node.js

从官网下载node.js的官方4.1版本或更高版本。
建议设置npm镜像以加速后面的过程（或使用科学上网工具）。
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

六、安装react-native命令行工具

git clone https://github.com/facebook/react-native.git
代码clone成功后，进入目录react-native-cli下(默认在当前用户目录下)
例如我的是c:\Admin\react-native\react-native-cli
输入安装命令行：
npm install -g react-native-cli

若不想放在C盘，又安装了，如何办？
删除命令
npm uninstall -g react-native-cli

七、创建项目

进入你的工作目录，运行
react-native init MyProject
并耐心等待数（或数十）分钟。
0.14版本中带来了一个新的问题以至于在windows下引用图片不能成功（在0.15后修复），请参考这里进行对应修改以绕过此BUG。

八、运行packager 在react-native-cli目录下

react-native start

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本。第一次访问通常需要十几秒，并且在packager的命令行可以看到进度条。
如果你遇到了ERROR Watcher took too long to load的报错，请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js，将其中的MAX_WAIT_TIME 从25000改为更大的值（单位是毫秒）

九、运行

如果有真机，可以不必运行模拟器，要配置好驱动，使得adb devices可以看到对应的设备。

十、安卓运行

保持packager开启，另外打开一个命令行窗口，然后在工程目录下运行
react-native run-android
首次运行需要等待数分钟并从网上下载gradle依赖。
运行完毕后可以在模拟器或真机上看到应用自动启动了。
如果gradle依赖下载出现报错，请多试几次，或者设置VPN加速。
如果apk安装运行出现报错，请检查上文中安装SDK的环节里所有依赖是否都已装全，platform-tools是否已经设到了PATH环境变量中，运行adb devices能否看到设备。
至此，应该能看到APP运行，并报错 Unable to download JS bundle
摇晃设备或按Menu键（Bluestacks模拟器按键盘上的菜单键，通常在右Ctrl的左边 或者左Windows键旁边），可以打开调试菜单，点击Dev Settings，选Debug server host for device，输入你的正在运行packager的那台电脑的局域网IP加:8081（同时要保证手机和电脑在同一网段，且没有防火墙阻拦），再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。
如果真实设备白屏但没有弹出任何报错，可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。

十一、运行安卓调试

打开Chrome，访问 http://localhost:8081/debugger-ui，应当能看到一个页面。按F12打开开发者菜单。
在模拟器或真机菜单中选择Debug JS，即可开始调试。

学习教程链接

1.React-Native(英文官网)

2.React-Native(中文官网)

3.React-Native学习指南

4.React-Native-Examples UIExplorer

---