React Native 安装开发环境及如何编写Hello World程序

安装开发环境

本文章针对如何开始react app的开发，供 react app入门对新手指引。

以下操作是在mac环境下完成，并以 Android 应用环境为例。

安装 brew

node 和 react native 命令行工具，需要使用 brew 来安装

安装 node

brew install node

安装 React Native 命令行工具

npm install -g react-native-cli

安装 Android Studio

Android Studio 提供了 Android SDK 和 emulator。

版本说明：

• Android Studio 版本 2.0 以上。
• Android Studio 依赖 jdk1.8 以上。

下载地址：
- jdk：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

• Android Studio：http://developer.android.com/sdk/index.html

安装步骤

1. 选择“Custom”；
2. 勾选“Performance”和“Android Virtual Device”；
3. 安装完组件后，出现“Android Studio”配置页面，点击下方“configure”按钮，选择“SDK Manager”；
4. 选择“Show Package Details”，确保勾选“Google APIs, Intel x86 Atom System Image, Intel x86 Atom_64 System Image，Google APIs Intel x86 Atom_64 System Image”；
5. 切换至 “SDK Tools” tab下，选择“Show Package Details”，确保勾选“Android SDK Build-Tools 23.0.1”；
6. 设置环境变量，vi ~/.bash_profile

# If you installed the SDK without Android Studio, then it may be something like:
# /usr/local/opt/android-sdk
export ANDROID_HOME=~/Library/Android/sdk

推荐安装

Watchman

用来监视文件并且记录文件的改动情况,当文件变更它可以触发一些操作。

brew install watchman

Flow

静态代码检查工具

brew install flow

Gradle Daemon

Gradle 是一种构建工具，它可以帮你管理项目中的差异，依赖、编译、打包、部署。
开启该守护进程。
https://docs.gradle.org/2.9/userguide/gradle_daemon.html

配置 Android 命令行工具目录

将 Android Tools 目录配置到环境变量 PATH 中，以便可以直接执行 Android Tools 命令，如：android avd。
vi ~/.bash or ~/.bash_profile：

# Your exact string here may be different.
PATH="~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools:${PATH}"
export PATH

---

Hello World

1. 创建项目：react-native init HelloWord；
2. 进入项目目录：cd HelloWord；
3. 运行项目：react-native run-android；
4. 编辑“index.android.js”文件，然后在 APP 中执行“reload js”操作。

...
class ReactPhotoAlbum extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello World
        </Text>
      </View>
    );
  }
}
...

在真机上调试

如果在真机上安装应用，请在运行项目前，将手机链接上您的电脑，并开启“USB调试”。
项目运行后，可以执行：adb devices，来查看链接到 PC 的真机是否链接成功。

Android5.0 以后版本

1. 使用反向代理端口，将 MAC 端口反向代理到测试机上：adb reverse tcp:8081 tcp:8081；
2. 在菜单中选择执行“reload js”操作。

Android5.0 之前版本

1. 确保你的真机和你的电脑链接到同一个 WIFI，保障两者可以通过局域网访问；
2. 打开 APP 唤出菜单（见以下常用命令）；
3. 选择“Dev Settings”；
4. 点击最下方“DEBUGGING”栏，点击“Debug server host for device”；
5. 输入你的电脑的“ip＋端口号”，如：10.0.1.1:8081；
6. 在菜单中选择执行“reload js”操作。

常用命令

运行 Android 程序

react-native run-android

查看连接的设备列表

adb devices

打开菜单

当你需要使用菜单时，可以使用以下操作来唤出菜单：

• 按手机的“menu”键；
• 摇晃设备打开菜单键；
• 在电脑上输入：adb shell input keyevent 82。

查看应用日志

adb logcat *:S ReactNative:V ReactNativeJS:V

---

参考

https://facebook.github.io/react-native/docs/getting-started.html#content