React Native嵌入到原生Android问题记录 – 06peng1721人阅读
Android应用（11）
首先来一个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%\%JAVA_HOME%\bin\(注意分号分隔)
2、Android SDK(编译版本为以下条件),此处安装步骤省略,默认代表已熟悉安卓环境搭建
安装好后,配置环境变量, 在系统变量中创建ANDROID_HOME,并配置路径&D:\devtools\android-sdk&,在系统变量path中追加&%ANDROID_HOME%\%ANDROID_HOME%\platform-tools&(注意分号分隔)
Android SDK Build-tools version 23.0.1Android 6.0 (API 23)Android Support Repository
/download/下载地址,安装步骤省略了,因为git是很早安装的
重要的是需要配置环境变量,在系统变量path中追加,我本地的git路径&C:\Program Files (x86)\Git\bin&(注意分号分隔),如果不设置环境变量,在React Native创建项目时,会报错；
4、Node.js
/下载地址,我本机安装的4.2.1,安装好后配置环境变量,在系统变量path中,追加“D:\devtools\nodejs”
5、安装cygwin(此步骤也可省略,使用WINDOWS的CMD窗口代替,如果在WINDOWS的CMD中执行命令,出奇怪问题,就再安装cygwin也可以)
这个安装会比较繁琐,但是不安装,直接使用windows的CMD命令行,有时会出现一些意想不到的问题,建议通过cygwin执行React Native命令;
/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、如何去掉摇晃手机，弹出的菜单呢？
针对第一个问题，可以到此链接查看原由，作者分析的很到位：
/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，非常具有研究价值。
/articles/V3U3UbU
/articles/zaInUbA
后续随着React Native社区的发展以及开源的强大，后续React Native的相应组件及特效也会雨后春笋般的出现，为后续开发节省了更多的时间
该框架的优势，基于JS开发界面，并通过React Native库，将JS编写的脚本，编译成安卓及IOS原生的代码，并进行执行；此种架构及其思想，
很值得借鉴和学习。
本文章参考了各位大神的文章，链接已在相关位置进行了嵌入。在此，非常感谢，帮助我解决了很多不明之处。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：43982次
排名：千里之外
原创：10篇
评论：20条
(1)(1)(1)(1)(1)(1)(1)(2)(1)(3)(1)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'从Android到React Native开发（一、入门） - 简书
从Android到React Native开发（一、入门）
大家好┏ (^ω^)=，许久不见，一不小心断更就成为了一种习惯，因为最近掉React Native的坑里，无法自拔啊～(╯‵□′)╯︵┻━┻。关于React Native是什么，各位可谷歌之，这里主要给大家安利下React Native，总结下一些从Android到React Native相关的概念和基础。来吧，互相伤害啊(??? ?? ???)。
本文并非讲解入门基础，更多是给Android原生开发学习和理解React Native，前半部分主要是闲谈和安利，后半部分是相关的入门，请紧张的往下看Σ（?□?；）
注：喜欢干货的可以直接跳到后面的：带着Android开发来理解React Native
请收起你不屑的眼神
为什么要学React Native？
因为现在许多主流的应用都有React Native的影子，它对比原生开发更为灵活，对比H5体验更为高效，而且跨平台的支持特性。
相对ionic这类PhoneGap，它效率更高，和原生之间的交互更方便。
多个版本迭代后的今天，它已经拥有了丰富第三方插件支持。
React Native解决不了的，可以通过各位熟悉的原生来解决。
更方便的热更新。
当然，React Native的坑也不在少数：
尽管是跨平台，但是不同平台Api的特性与显示并不一定一致。
相对增大了app的体积。
调试’相对‘麻烦。
Android上的兼容性问题。
总的来说，React Native适合作为项目中的补充，而不是作为核心去开发APP。
因为尽管是跨平台和快捷开发，但是以React Native为核心，去开发稍微偏中型以上的项目，后期维护的人员绝对不比原生的少多少，而且项目大了，体验依旧是个大问题。
相反，把React Native作为项目开发中的补充，可以在一定程度上实现平台业务的统一，还有灵活的开发效率，补充原生的不足。
此时此刻，此情此景
如何入门？
作为原生开发，因为React Native的特殊性，在入门的时候会比前端开发更慢一些，除非你会基础的javascript，ES6语法，React相关基础知识，不然这一层面确实相对会缺乏优势。
原生开发在React Native的优势是后期，React Native随着业务的增加，单纯的React Native时时无法满足需求，那时候熟悉原生、又掌握了React Native的你，一定能给出更好的解决方案。
所以不要放弃（我会告诉你中途我都放弃好几次了嘛？），万事开头难，何况你已经被Android坑了这么久，怕(￣￣;)什么？刚开始想到要学习js和es6，确实会有些怠惰，但这步踩下去，你将会打开新世界的大门，哲学大门就在前方(??? ?? ???)。
那么入门前你需要知道：
javascript基础（不懂？不怕，学习React的时候一起熟悉）
ES6语法（不懂？不怕，学习React的时候一起熟悉）
React 还是必须学习一下，可以不必太深入，但是至少了解下思路也好。
React 的核心思想是：封装组件。React Native就是按照一个个组件组成App，可以认为，基础的React Native，就是一个Activity，里面放着许多的组件，跳转不同的组件，实现不同的页面。
React的学习可以通过这个了解:
React相关的资料 ：
上面的资料足够你了解React，了解了React，你才能更好的学习React Native，如果对于javascript和ES6还不了解的，通过上述React学习可以同步了解。打了那么多鸡血，那么赶紧，让我们先走下面，用Android的基础，来了解React Native的‘哲学‘吧。
带着Android开发来理解React Native
1、开发环境
Android开发转过来的，推荐Webstrom，因为它和Android Studio同出一家，快捷键、插件、git版本管理等等基本不需要二次学习，无需多虑了。至于开发环境配置，跟着下方链接妥妥的。
2、项目理解
React Native创建工程，是通过在命令终端输入 react-native init 你的项目名字 来创建工程的，创建的工程会从网络端，同步到你终端所在路径的本地，生成一个和android project类似的项目，如下图。
其中关键的文件有：
android文件夹，就是一个可以用android studio打开的android项目。
ios文件夹，是一个可以用xcode打开的ios项目。
index.android.js，这是android的React Native入口文件。
index.ios.js，这是ios的React Native入口文件。
package.json，类似android studio的build.gradle，你依赖的库都写在里面。
node_module文件夹，你依赖的库下载下来都存放在里面，属于git的忽略文件，你要找的依赖库源码也在里面，包括React和React Native。
jscode文件夹，是自己创建的文件夹，用来存放自己写的js文件。
这里需要理解的是：
package.json，类似于android studio中的build.gradle添加远程依赖，不同的是，package.json大多数时候不需要我们手动添加，我们只需要在根目录通过命令行，npm install xxxxxx --save 就可以依赖一个库了。
install之后，库的依赖信息，自动被写到package.json里面，对应的库也会被下载到node_module文件夹中，类似android studio依赖后把aar同步到本地。
package.json
node_module是一个忽略文件，提交的时候不需要提交到git上，类似android studio远程依赖下来的aar，也不会提交到git上。其他人在使用React Native项目时，只需要npm install，工程就会根据package.json，去同步下载各个依赖库到node_module。
注：有时候还需要运行react-native link 或 react-native link xxx，这是因为有些第三方库是通过原生代码加React Native实现的，通过这个命令，可以自动把相关的配置代码，自动添加到android和ios工程中。
3、Android开发需要理解的React Native
1）React Native 其实是运行在ReactActivity上
一般情况下只在一个activity上运行，一般情况下是因为，你也可以自己写新的Activity，继承ReactActivity来实现你想要的逻辑。
项目默认创建好了MainActivity
2）Application默认创建工程时，就会继承ReactApplication
其中getPackage()就是返回需要与原生交互的包，MainReactPackage时初始化生成，其他是你react-native link命令时帮你插入的。当然，你也可以自己写与原生交互的模块。
3）路由（页面跳转）
React Native默认是运行在一个Activity上，那么页面之间的跳转自然不是Activity之间的跳转，而是通过 Navigator来实现跳转的。
是的，Navigator是用来做跳转的，通过场景（Scene）来指定跳转对象。这里Scene类似Intent的作用，告诉Navigator我要去哪里，Navigator负责场景推入和退出。（推荐使用react-native-router-flux框架实现）。
4）state，状态
更新界面，修改显示，加载数据，用户交互，都是靠它，它是整个React Native的核心之一，React Native组件的state变化了，那么它就会重新渲染，所以维护state，通过数据或者动作更新state等，是React Native的重点，也是和原生很大差异的地方。
所以你就看到redux这个东西，也许第一次接触你会觉得它很难理解，但是你只需要知道，它的核心就是让你更好的维护React的state，统一管理和处理state，所以后期redux-thunk会成为你React Native的管理利器。当然，如果组件或项目不复杂，完全不必要接触它。
“组件的state改变了，所以界面变化了。”
5）编译调试
编译其实很简单，android其实就是在项目的根目录终端输入react-native run-android就可以编译安装，IOS本人习惯是，通过点击ios文件目录下的xcodeproj文件，打开xcode直接点击运行。
对，就是我
当前，刚刚接触React Native，运行不起来是时有的事情，百度谷歌一个一个解决就好了，大部分时候都是忘记npm install，react-native link，ip不对，node服务没有重新启动等等，相信我，React Native会让从此讨厌上红色！
React Native的调试是靠chrome浏览器来调试的，没错，浏览器，这样很前端吧～哈哈哈(?)。通过摇晃手机（模拟器使用快捷键 android Command? + M / ios Command? + D）在React Native 应用弹出下方页面。Debug JS Remotely就是打开调试。
图片来源网络，侵删
在浏览器可以看到如下页面，有源码，可以断点，看输出，调试参数，应有尽有。
图片来源网络，侵删
调试相关的文章推荐 : 。
其实还有很多可以聊的，秉承着不能让我一个瞎的精神，安利他人入教，我可是孜孜不倦啊。可惜因为时间关系（懒），想想这篇文章拖了快一个月，如今还在电脑里躺尸，其他的还是等第二期吧。等有人看了再说吧。╮(╯╰)╭好了，赶紧补基础吧： React Native 中文官网。
还是熟悉的那只猫
一个爱猫的程序员老司机，致力于通俗易懂的愉悦♂开发。 /CarGuo/React Native实战（一）：配置和起步
发表于 15:40|
作者廖祜秋
摘要：MDCC 2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
10月14日-16日，由CSDN和创新工场联合主办的将在北京新云南皇冠假日酒店隆重召开，现在抢注大会门票，即享多重好礼！
Facebook开源React Native也势要统一移动端编程语言，而其提前发布React Native for Android更是引得国内外开发者一众热捧。MDCC
2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React
Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
图：阿里巴巴工程师 廖祜秋
以下为正文：
2015 年 9 月 15 号，React Native for Android 发布。至此，React 基本完成了对多端的支持。基于 React
/ React Native 可以：
HTML5、Android、iOS 多端代码复用；
实时热部署。
在接下来的时间，我会通过一系列文章来介绍 React Native。本文介绍环境配置以及如何建立一个简单的项目。（注：本篇文章 iOS 和
Android 开发都适用。）
目前使用 React Native 开发只能在 Mac 系统 上进行。写 iOS 的同学，应该都是 Mac （除了听说网易有些部门写 iOS
给黑苹果之外，哈哈哈哈）。 开发 Android 的同学, 如果公司配发的不是 Mac 的话，建议自己入手一个，能显著提高生产力，就当投资自己吧。我大阿里对
Android 开发也是不给 Mac 的（不知道公司什么思路，现在倒是可以申请 Mac air了，air的性能……），所以我也是自己买的。
需要安装的有：
Homebrew 是 Mac 中的一个包管理器。没有安装的话，点击
安装，我的版本如下：
mac-2:~ srain$ brew -v
Homebrew 0.9.5 (git revision ac9a7; last commit )
版本过低将会导致无法安装后续几个组件。可用 brew update 升级。
Node.js 需要 4.0 及其以上版本。安装好之后，npm 也有了。
安装 Node.js
nvm 是 Node.js 的版本管理器，可以轻松安装各个版本的 Node.js 版本。
安装 nvm 可以通过 Homebrew 安装：
brew install nvm
的方法安装。
然后安装 Node.js：
nvm install node && nvm alias default node
也可以直接下载安装 Node.js：
安装好之后，如下：
mac-2:react-native srain$ node -v
mac-2:react-native srain$ npm -v
这两个包分别是监控文件变化和类型检查的。安装如下：
brew install watchman
brew install flow
安装 React-Native
安装即可：
npm install -g react-native-cli
App开发环境的设置
XCode 6.3 及其以上即可。
这个比较麻烦。
设置环境变量：ANDROID_HOME
export ANDROID_HOME=/usr/local/opt/android-sdk
SDK Manager 安装以下包：
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository
初始化一个项目
文档提到：
react-native init AwesomeProject
初始化一个项目，其中 AwesomeProject 是项目名字，这个随意。等待一段时间之后（具体视网络情况而定），项目初始化完成。
进入到项目目录：
cd AwesomeProject
mac-2:AwesomeProject srain$ ls -l
drwxr-xr-x
476 Sep 21 09:52 android
-rw-r--r--
1023 Sep 21 11:47 index.android.js
-rw-r--r--
1065 Sep 20 11:58 index.ios.js
drwxr-xr-x
204 Sep 20 11:58 ios
drwxr-xr-x
170 Sep 21 10:31 node_modules
-rw-r--r--
209 Sep 20 11:58 package.json
其中 android 和 ios 中分别为两个平台的项目文件。index.android.js 和 index.ios.js 为两个页面对应的
不管是 iOS 还是 Android，在开发调试阶段，都需要在 Mac 上启动一个 HTTP 服务，称为“Debug Server”，默认运行在
8081 端口，APP 通 Debug Server 加载 js。
iOS 和 Android 的模拟器，连接 Mac 本机的服务都很方便。但是通过 USB 或者 WiFi 连接调试，就稍微麻烦一些了。
还是非常简单，XCode 打开项目，点击运行就好。修改 index.ios.js, 在模拟器中 ? + R 重新载入 js 即可看到相应的变化。
iOS 真机调试也简单，修改HTTP地址即可。
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
按照官方文档，需要一个模拟器（Genymotion模拟器也可以）。但是不像 iOS，Android 开发平时更多是直接用真机进行开发和调试，如何运行部署到真机，下面会提到。
运行命令：
react-native run-android
然后就会部署到模拟器，修改 index.android.js ，调出模拟器菜单键，选择重新载入 js 即可看到变化。
Android 真机调试
示例 App 直接部署到真机，红色界面报错，无法连接到 Debug Server。
如果是 5.0 或者以上机型，可通过 adb 反向代理端口，将 Mac 端口反向代理到测试机上。
adb reverse tcp:8081 tcp:8081
如果 5.0 以下机器，应用安装到测试机上之后，摇动设备，在弹出菜单中选择 Dev Setting & Debug Server host
for device，然后填入 Mac 的 IP 地址（ifconfig 命令可查看本机 IP）
关于修改 DevHelper 来进行和 iOS 一样的开发调试，后续关于热部署时，我会介绍到。
在 Android Studio 中调试开发
我们可能希望在 Android Studio 打开项目，然后编译部署到真机。
这个时候，在命令行启动 Debug Server 即可：
react-native start
结论和后续
本篇文章，iOS 和 Android 都适用。至此，环境配置和示例项目运行应该都好了。后续我会继续发几篇文章介绍：
重点介绍 Android 相关的开发：包括组件，源码分析等；
动态热部署；
多端代码复用。
官方文档：
时间仓促，水平有限，如有谬误，还请纠正，原始文档在。
将于10月14日-16日在北京新云南皇冠假日酒店召开。大会特设九大技术专场：平台与技术（iOS）、平台与技术（Android）、平台与技术（跨平台）、产品与设计、游戏开发、企业移动化、虚拟现实专场、硬件开发与技术、嵌入式开发。大会将聚集国内最具实力的产品技术团队，与开发者一道进行最前沿的探讨与交流。&
第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章