React Native for Android 研究总结

首先来一个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

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 react-native-cli,在本地安装React Native环境(此处在cygwin中进入本地的React Native工程目录执行也可)

打开cygwin控制台,然后进入你的React Native项目文件夹,比如我的本地目录是:D:\ReactNative

进入这个目录需要执行的命令如下:快速补全可以输入部分内容,然后按Tab键

创建React Native工程（由于第一次在cygwin中执行,本次在windows的CMD窗口中执行也通过了）

react-native 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即可看到变化。

二、React Native如何打包发布Android apk问题?

 当我把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原生的代码，并进行执行；此种架构及其思想，

很值得借鉴和学习。

本文章参考了各位大神的文章，链接已在相关位置进行了嵌入。在此，非常感谢，帮助我解决了很多不明之处。