React Native开发环境的配置(一)

2015年9月15日, 脸书发布Reactive Native for Android, 到此, React Native现在正式可以支持多平台. 功能如下:

1. HTML5 android iOS多段代码复用;
2. 实时热更新

现在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