Skip to content

Latest commit

 

History

History
92 lines (54 loc) · 4.57 KB

config-environment-on-windows.md

File metadata and controls

92 lines (54 loc) · 4.57 KB
Raw

React Native 学习旅程

欢迎您帮忙纠错, 一起帮助更多的人。 一起来学习交流 React, QQ 群：413381701

###本文档前置条件

  1. 已安装 JDK，并配好环境变量。
  2. 已安装如下 Android SDK，并配好环境变量。
    • Android SDK Build-tools (23.0.1)
    • Android SDK Tools (24.3.3)
    • Android SDK Platform-tools (22)
    • Android 6.0 (API 23)
    • Android Support Library(23.0.1)

推荐从AndroidDevTools下载或者用腾讯 Bugly镜像加速下载。

强烈建议配置为%ANDROID_HOME%; %ANDROID_HOME%\platform-tools; %ANDROID_HOME%\tools形式。

安装 C++ 环境

  • 下载并安装Visual C++ 2013，选择 vcredist_x64.exe（如果 32 位系统，下载 vcredist_x86.exe），仅有7M大小，编译 Node.js 的 C++ 模块时需要用到。

安装 Python

  • 安装Python 2.7.x（3.x 版本不行），安装时确保 Add python.exe to Path 已选中状态。

安装 Node.js

  • 从官网下载Node.js 4.4.x的官方 4.x 版本，或者Node.js 5.x版本 ，安装时确保Add to PATH已选中状态。
  • 建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。 
    npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

安装 Gradle

  • 虽然在编译 Android 项目时会自动下载，但如果网络状态不好，很容易下载失败，建议先下载gradle-2.4-all.zip。
  • 下载上述文件后，将 zip 文件放在C:\Users\kenny\.gradle\wrapper\dists\gradle-2.4-all\6r4uqcc6ovnq6ac6s0txzcpc0 (不存在的目录就手动创建, 把 kenny 改成你的用户名)。

安装 react-native 命令行工具

npm install -g react-native-cli

请耐心等待 1-3 分钟。

初始化项目

在命令行里执行

react-native init RNProject

请耐心等待 5-10 分钟。

运行 React Native

进入 RNProject 目录, 在命令行里执行

react-native run-android

注意：如果 Android SDK Build-tools (23.0.1)下载不到，用 23.0.2 也行，就在RNProject\android\app\build.gradle里找到buildToolsVersion "23.0.1"，改为buildToolsVersion "23.0.2"就可以了

连接手机

在命令行里执行

adb reverse tcp:8081 tcp:8081

建议使用 Android 5.0 系统手机，不用手动设置 Debug server host ，但是最低要求 Android 4.1 系统手机。

提示：如果你执行adb devices没有问题，但执行上面adb reverse命令出问题，请下载 utility/adb.zip 关解压，将 3 个文件放在%ANDROID_HOME%\platform-tools下

开发

用 IDE 打开 RNProject 目录，开始开发吧!

调试

  • 当 Node.js 服务意外停了或不小心把窗口关了，只需手动开启这个服务即可，在命令行进入 react native 目录，运行react-native start
  • 查看 Node.js 服务是否在运行状态，只需在浏览器里输入http://localhost:8081/index.android.bundle?platform=android，在第一行看到(function(global) {global. 表示服务正常

纠错

  • 欢迎您帮忙纠错, 一起帮助更多的人。 一起来学习交流 React, QQ 群：413381701

相关文档