首先来一个GIF动画,看下React Native的效果
由于仅仅做安卓开发,没有对ios部分进行研究,本文章中的内容不涉及IOS,但是根据React Native的理念,两者是相通的;
针对近期比较火的React Native框架,对它进行了一番研究,主要针对以下几点内容，进行总结:
一、React Native在windows上的环境搭建及运行?
二、React Native如何打包发布Android apk问题?
三、如何学习React Native?
一、React Native在windows上的环境搭建及运行?
由于资金有限,目前手中只有windows环境,所以只能尝试在windows上搭建React Native环境;
第一步：搭建环境之初,你需要安装几个开发包:
1、JDK（1.7）
安装好JDK包后，需要配置环境变量
在系统变量中,创建JAVA_HOME,并配置路径,我的本地路径是"D:\devtools\Java\jdk1.7.0_51",在系统变量path中追加%JAVA_HOME%\bin;%JAVA_HOME%\bin\lib;(注意分号分隔)
2、Android SDK(编译版本为以下条件),此处安装步骤省略,默认代表已熟悉安卓环境搭建
安装好后,配置环境变量,在系统变量中创建ANDROID_HOME,并配置路径"D:\devtools\android-sdk",在系统变量path中追加"%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools"(注意分号分隔)
- Android SDK Build-tools version 23.0.1
- Android 6.0 (API 23)
- Android Support Repository
二、React Native如何打包发布Android apk问题?3、GIT
http://git-scm.com/download/下载地址,安装步骤省略了,因为git是很早安装的
重要的是需要配置环境变量,在系统变量path中追加,我本地的git路径"C:\Program Files (x86)\Git\bin"(注意分号分隔),如果不设置环境变量,在React Native创建项目时,会报错；
4、Node.js
http://nodejs.cn/下载地址,我本机安装的4.2.1,安装好后配置环境变量,在系统变量path中,追加“D:\devtools\nodejs”
5、安装cygwin(此步骤也可省略,使用WINDOWS的CMD窗口代替,如果在WINDOWS的CMD中执行命令,出奇怪问题,就再安装cygwin也可以)
这个安装会比较繁琐,但是不安装,直接使用windows的CMD命令行,有时会出现一些意想不到的问题,建议通过cygwin执行React Native命令;
http://jingyan.baidu.com/article/6b97984d83dfe51ca2b0bf0e.html(可以参考此处安装教程)
6、安卓手机一台(真机),模拟器也可,在模拟器上,可以不用配置,就可以看到效果,相对真机简单一点
第二步:相关依赖软件安装好后,就可以开始创建React Native项目
首先在windows的CMD窗口,执行npm install-g reactnativecli,在本地安装React Native环境(此处在cygwin中进入本地的React Native工程目录执行也可)
打开cygwin控制台,然后进入你的React Native项目文件夹,比如我的本地目录是:D:\ReactNative
进入这个目录需要执行的命令如下:快速补全可以输入部分内容,然后按Tab键
创建React Native工程（由于第一次在cygwin中执行,本次在windows的CMD窗口中执行也通过了）
reactnative init Demo2
此步骤时间较长,不是出现了问题,耐心等待即可.
出现以上提示，说明项目创建成功,
cd Demo2,进入创建的项目目录,然后执行命令,在模拟器或真机上进行运行调试(该命令,模拟器可以直接运行，但是真机会提示错误)
react-native run-android
出现上面的错误时,我手工的将apk安装到了手机上(编译后的APK文件路径是:D:\ReactNative\Demo2\android\app\build\outputs\apk\app-debug-unaligned.apk)
在手机上安装好apk,此时我们运行,一般你会看到一个大红的背景页面,此时摇晃手机,在弹出的菜单中选择Dev Settings,点击Debuging的Debug server host for device,输入你本机的ip地址(注意手机和电脑是否在同一网段或局域网)
执行以下命令,启动电脑的node.js服务器,便于客户端从服务器下载最终的.js文件
node node_modules/react-native/packager/packager.js,出现以下提示,启动成功,目前在安卓上,官方写的启动命令是react-native start,但是执行会报错,然后又推荐用这种方式启动
此时摇晃手机，选择Reload JS,手机上就会出现类似Hello Word！的页面,此时代表着你的React Native环境已经搭建成功,可以感受React Native的神奇!
http://facebook.github.io/react-native/docs/tutorial.html#content,此处介绍了一些语法和结构,怎么使用React Native进行开发APP界面的;
你在电脑上直接修改项目目录的index.android.js文件,保存后，在手机上打开app，摇晃手机,重新Reload JS即可看到变化。
当我把DEMO程序跑起来时，内心中有了一些疑问
1、假如真正发布时，是否需要用户手工配置IP地址,然后设置才能看到界面呢？
2、如何去掉摇晃手机，弹出的菜单呢？
针对第一个问题，可以到此链接查看原由，作者分析的很到位：
http://www.race604.com/rn-android-standalone-apk/
针对第二个问题，可以参考以下文章
http://www.liaohuqiu.net/cn/posts/react-native-android-package/
根据以上文章，我的分析结论是，http://localhost:8081/index.android.bundle?dev=true&inlineSourceMap=true&minify=false&runModule=true
在通过react-native-gradle 插件打包时
传到调试服务的dev=true参数以及
首页Activity的.setUseDeveloperSupport(BuildConfig.DEBUG)参数,如果改成false，那么在最终发版时，手机摇晃菜单应该就会消失;
因为目前React Native 官方没有给出安卓的打包发布方式，所以目前只能根据这些资料，进行猜测；
三、如何学习React Native?
由于目前对React Native涉及还未深入,在探索过程中，发现了以下的资料，在这里做下分享,里面有教程和DEMO，非常具有研究价值。
http://www.tuicool.com/articles/V3U3UbU
http://www.tuicool.com/articles/zaInUbA
后续随着React Native社区的发展以及开源的强大，后续React Native的相应组件及特效也会雨后春笋般的出现，为后续开发节省了更多的时间
该框架的优势，基于JS开发界面，并通过React Native库，将JS编写的脚本，编译成安卓及IOS原生的代码，并进行执行；此种架构及其思想，
很值得借鉴和学习。
