React Native 开发环境配置

   Develop  React Native    Develop  React Native

准备工作

  1. 安装 Nodejs (https://nodejs.org/en/)
  2. NPM
  3. JAVA (http://www.oracle.com/technetwork/java/javase/downloads/index.html)
  4. Android Studio (https://developer.android.google.cn/studio/index.html)
  5. Git
  6. 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 模拟器

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

创建项目

1
2
3
react-native init AwesomeProject
cd AwesomeProject
react-native run-android

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

相关组件

  1. Android Emulator
  2. Android SDK Platform-Tools
  3. Android SDK Build-Tools

    安装对应版本的组件即可


编译常见错误

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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

    解决方法:

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

  3. app 下面的 build.gradle 文件

    1
    2
    3
        compileSdkVersion 25
    buildToolsVersion "25.0.2"
    `
  4. android 工程下的 build.gradle 文件:

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

参考

  1. 准备工作
  2. 安装React Native
  3. 配置ANDROID_HOME
  4. 配置ANDROID_SDK_HOME
  5. 配置 platform-tools
  6. 安装Visual Studio Emulator for Android 模拟器
  7. 创建项目
  8. 相关组件
  9. 编译常见错误
  10. 参考
React Natice Android 版 打包APK
VisualSVN 破解