最近因为项目需要, 深入研究 React 和 React Native,React 已经掌握得差不多了, 现在集中精力在 ReactNative 的项目开发. 这里需要记录在学习过程中的技术细节, 好记性真的不如烂笔头, 多写文档总会有好处的.
本文重点记录使用 React Native 构建双平台 App 的过程, 同时进一步掌握构建过程中运用的技术.
搭建开发环境
安装 react-native-cli:NPM i -g react-native-cli
Android SDK
安装 Android SDK 并启动进行配置:
配置环境变量
export ANDROID_HOME=~/Library/Android/sdk
export PATH={ANDROID_HOME}/tools
export PATH={ANDROID_HOME}/platform-tools
Android 虚拟机
设定 Genymotion 的 Android SDK 位置 (Android SDK 的路径可以在 SDK Manager 上找到).
模拟器
有多款模拟器可供选择, Android Studio 自带, Genymotion 和夜神模拟器, 推荐选择夜神模拟器.
配置方法:
在 Nox/bin 目录运行 nox_adb.exe connect 127.0.0.1:62001, 如果失败, 使用 adb devices 查询, 出现版本不一致的情况, 可以把 Android/sdk 目录下的 adb.exe 拷贝到 Nox/bin 下, 并改名为 nox_adb.exe, 反过来操作也是可以的.
分别打开 Android Studio 和夜神模拟器, 此时运行命令 nox_adb.exe connect 127.0.0.1:62001 基本上都会成功.
新建 React Native 项目
运行 react-native init project-name, 进入 project-name 文件夹安装依赖 NPM i 并运行 react-native run-Android 或 react-native run-iOS 构建 App.
以 Android App 为例, 在 Android Studio 打开 Android 文件夹 (注意: 此处是 Android 文件夹, 不是 project-name 项目文件夹).
在 C:\Users\user.gradle\wrapper\dists 目录下放入对应文件
文件下载地址 http://services.gradle.org/distributions/
运行项目
这一步很关键, 配置 java 的环境变量, 首先是 JAVA_HOME 和 ANDROID_HOME:
在 Path 项中添加下图中变量:
JAVA_HOME, 变量值为 D:\Android\sdk;
ANDROID_HOME, 变量值为 D:\Android\sdk;
然后在 Path 项中添加 jdk 和 jre 下的 bin 目录;
以上是用户变量配置, 下面进行系统变量配置:
同时打开 Android Studio,Nox 并在 AS 中打开项目中的 Android 文件夹.
运行 nox_adb.exe connect 127.0.0.1:62001 连接 AS 和 Nox, 然后再运行 react-native run-Android, 此时就会构建 Android App,
image
关闭端口冲突: lsof -n -i4TCP:8081,kill -9 <PID>
来源: http://www.jianshu.com/p/5a898c5fa37f