React Native 开发环境配置

2017-10-26 Develop React Native Develop React Native

准备工作

安装 Nodejs (https://nodejs.org/en/)
NPM
JAVA (http://www.oracle.com/technetwork/java/javase/downloads/index.html)
Android Studio (https://developer.android.google.cn/studio/index.html)
Git
Visual Studio Emulator for Android (https://www.visualstudio.com/vs/msft-android-emulator/)

安装React Native

1	npm install -g yarn react-native-cli

配置`ANDROID_HOME`

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

ANDROID_HOME 值为Android SDK路径

配置`ANDROID_SDK_HOME`

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

ANDROID_SDK_HOME 值为Android 根目录路径

配置 `platform-tools`

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 选中PATH -> 双击进行编辑
将 %ANDROID_HOME%\platform-tools 添加进去即可

安装`Visual Studio Emulator for Android` 模拟器

下载
Windows + R 键入 regedit
在注册表编辑器中找到 HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools
右键点击Android SDK Tools
修改 Path 的值为你的 Android SDK 的路径

创建项目

1
2
3

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

第一次运行 react-native run-android 时间会很长，主要是安装相关组件

编译常见错误

Execution failed for task ‘:app:installDebug’. com.android.builder.testing.api.DeviceException: No connected devices!

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

解决方法：

先修改 android 下 wrapper 的 gradle-wrapper.properties 配置文件,
distributionUrl=https\://services.gradle.org/distributions/gradle-3.4.1-all.zip

app 下面的 build.gradle 文件

1
2
3

    compileSdkVersion 25
    buildToolsVersion "25.0.2"
`

android 工程下的 build.gradle 文件：

1
2
3

dependencies { 
   classpath 'com.android.tools.build:gradle:2.5.0-alpha-preview-02' 
}

参考

http://facebook.github.io/react-native/docs/getting-started.html > Building Projects with Native Code

React Native 开发环境配置

准备工作

安装React Native

配置ANDROID_HOME

配置ANDROID_SDK_HOME

配置 platform-tools

安装Visual Studio Emulator for Android 模拟器