react native 的开发环境搭建

  • 目标平台：IOS和Android
  • 开发平台：macOS、Linux、Windows

使用不同的开发平台，针对不同的目标平台，环境的搭建步骤不一样。

下面是安装步骤是针对Android和macOS的搭建步骤。

一：必备安装的工具

1:Homebrew

Homebrew是Mac系统的包管理器，用于安装node和其他一些工具软件。

Homebrew官网地址

Install Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

注：Homebrew在安装时碰到/usr/local目录不可写的权限问题，使用下面命令修复：

sudo chown -R 'whoami' /usr/local

2:Node

mac通过安装好的Homebrew来安装node

注：react native需要nodejs5.0以上的版本

Install Node

brew install node

设置npm镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

3:Yarn

Yarn是Facebook提供的替代npm的工具，加速node模块的下载

Install Yarn 

npm install yarn -g

4:React Native的命令行工具（react-native-cli）

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务等任务

Install react-native-cli

npm install react-native-cli -g

同样遇到目录权限问题，需修复/usr/local目录的所有权：

sudo chown -R 'whoami' /usr/local

4:Android Studio

React Native需要Android Studio2.0以上的版本

Android Studio需要JDK1.8以上的版本，jdk官网

检查java版本

java -version

java version "1.8.0_101"
Java(TM) SE Runtime Environment (build 1.8.0_101-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.101-b13, mixed mode)

检查jdk版本

javac -version

javac 1.8.0_101

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器

Android Studio官网

注：

  • 不要随便改动安装过程中的默认选项。
  • 选择Custom选项
  • 勾选Performance和Android Virtual Device
  • 安装完成后，在Android Studio的启动欢迎界面中选择Configure | SDK Manager。
  • Default Preferences -> Appearance & Behavior -> System Setting -> Android SDK -> SDK Platforms -> 选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
  • Default Preferences -> Appearance & Behavior -> System Setting -> Android SDK -> SDK Tools -> 选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。（必须是这个版本）

5:ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。

查看隐藏文件

ls -a

编辑创建.bash_profile vi使用

sudo vi ~/.bash_profile

把下面的命令加入到~/.bash_profile文件中

export ANDROID_HOME=~/Library/Android/sdk

使用下列命令使其立即生效（否则重启后才生效）：

source ~/.bash_profile

使用echo $ANDROID_HOME检查此变量是否已正确设置。

echo $ANDROID_HOME

/Users/zhangyanbing/Library/Android/sdk

二：推荐安装的工具

1:Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

Install Watchman

brew install watchman

2:Flow

Flow是一个静态的JS类型检查工具。这一语法并不属于ES标准，只是Facebook自家的代码规范。

Install flow

brew install flow

3:将Android SDK的Tools目录添加到PATH变量中

把Android SDK的tools和platform-tools目录添加到PATH变量中，以便在终端中运行一些Android工具，android avd或是adb logcat等。具体做法仍然是在~/.bash_profile中添加：

export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

Gradle Daemon

开启Gradle Daemon可以极大地提升java代码的增量编译速度。

三：可选安装的工具

1:git

  • git会随着xcode一起安装
  • brew install git

2:Nuclide

Nuclide是由Facebook提供的基于atom的集成开发环境，可用于编写、运行和 调试React Native应用。

Nuclide的入门文档

3:Genymotion

比起Android Studio自带的原装模拟器，Genymotion是一个性能更好的选择，但它只对个人用户免费。

  • 下载和安装Genymotion（译注：你需要先注册登录，然后才能找到免费下载的链接！另外，genymotion需要依赖VirtualBox虚拟机，下载选项中提供了包含VirtualBox和不包含的选项，请按需选择）。
  • 打开Genymotion。如果你还没有安装VirtualBox，则此时会提示你安装。
  • 创建一个新模拟器并启动。
  • 启动React Native应用后，可以按下⌘+M来打开开发者菜单。

四：常见问题

1:安装Android Studio时无法创建虚拟设备

报错提示

Creating Android virtual device
Unable to create a virtual device: Unable to create Android virtual device

解决办法

运行android avd来手工创建虚拟设备。
在AVD管理器（AVD Manager）窗口中选择新设备并点击Start...来启动。

2:Shell命令无响应的异常

报错提示

Execution failed for task ':app:installDebug'.
  com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException

解决办法

试着将项目目录/android/build.gradle中的Gradle版本改为1.2.3。

touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties

results matching ""

    No results matching ""