2015年9月15日, 脸书发布Reactive Native for Android, 到此, React Native现在正式可以支持多平台. 功能如下:
- HTML5 android iOS多段代码复用;
- 实时热更新
现在React Native只能用mac开发,所以想开发这个能你就入手一部吧, 要不就装个黑苹果.
环境配置开始:
1. 安装Homebrew:
Homebrew是mac上的包管理器,没有安装的话在终端输入
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.安装Node.js和npm
nvm是Node.js的版本管理器,可以轻松安装各个版本的Node.js
npm是Node的包管理器.
2.1 首先安装nvm
brew install nvm
2.2 安装node.js和npm
nvm install node && nvm alias default node
Node.js我们需要的是4.0及其以上版本, 安装好以后,npm也有了.
安装node.js的时候发现问题了 , 发现我的电脑系统式最新版本的OSX 10.11, nvm 不支持 , 没办法只有直接下载Node.js !
网址在这 : https://nodejs.org/en/download/
安装好以后查看一下node版本和npm的版本
node -v
v4.0.4
npm -v
2.14.2
接着安装watchman 和flow
watchman是用来监控node开发过程中的额bug, flow是用来类型检查的.
安装方式如下:
brew install watchman
brew install flow
3.安装React Native
通过npm安装即可 :
npm install -g react-native-cli
4. iOS和android各个端的开发环境配置
iOS: Xcode6.3 及其以上即可
Android: 设置环境变量:
ANDROID_HOME export ANDROID_HOME=/usr/local/opt/android-sdk
而且还要安装SDK Manager包:
a. Android SDK Build-tools version 23.0.1
b. Android 6.0 (api 23)
c. Android Support Repository
5. 创建一个真正的项目
在终端输入
react-native init HelloWorld
等一段时间,这个等的时间是以网络情况而定, 项目初始化完成.
进入到项目目录看一下
其中android和ios中分别为两个平台的项目文件, index.android.js和index.iOS.js分别为android和iOS的界面文件
接下我们运行一下项目:
在两个平台上,我们都需要在Mac上启动一个http服务,称之为”Debug server”,默认运行在8081端口上,APP通过DebugServer加载js.
iOS和Android的模拟器, 连接mac本机的服务都很方便. 但是同过正机调试可能稍微麻烦一些了!
运行iOS端项目(模拟器和真机):
非常简单,只需要点击运行就好了, 如果你修改index.ios.js,在模拟器上就能看到相应的变化.
运行android端项目:
我们可以通过模拟器(Genymotion模拟器也可以的). 但是不像iOS, Android开发平台大多数是直接用真机进行开发和调试, 如何运行部署到真机, 下文会涉及到.
android模拟器:
a. $ react-native run-android
b. 在选定的文本编辑器中打开 index.android.js 并且编辑代码。
c. 按下菜单按钮 (默认情况下是 F2,或在 Genymotion 中点击 ⌘ M),然后选择 Reload JS 看看发生了什么变化!
d. 在一个终端中运行 adb logcat *:S ReactNative:V ReactNativeJS:V 来查看您的应用程序日志。
android真机:
如果是android5.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