11 Jan 2018

ReactNative搭建开发环境

Sublime text 插件

React ES6 Snippets
jsx语法代码格式化 sublime-jsfmt 修改设置Preferences -> Package Settings -> Sublime JSFMT->default setting
设置代码快捷键： Preferences -> Key Bindings ->User->{"keys":["ctrl+q"],"command":"format_javascript"}

必需的软件

主要安装：Python、Node、react-native-cli、ANDROID_HOME环境变量、git、安卓模拟器、Android Studio

Chocolatey(Windows的包管理器)(未使用)

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

Python 2
choco install python2
Node
choco install nodejs.install
设置npm镜像
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
命令行工具（react-native-cli）
npm install -g yarn react-native-cli
设置镜像源(未使用)：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
用yarn add 某第三方库名代替npm install --save 某第三方库名
Android Studio
安装完成后，在Android Studio的欢迎界面中选择Configure | SDK Manager
在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
```
SDK Tools->Show Package Details->Android SDK Build Tools:勾选
Android SDK Build-Tools 23.0.1,Android Support Repository
ANDROID_HOME环境变量
新建 ANDROID_HOME=d：\soft\android\sdk
把Android SDK的tools和platform-tools目录添加到PATH变量

推荐
Gradle Daemon提升java代码的增量编译速度

(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")

Git
choco install git
Genymotion模拟器
1. 下载和安装Genymotion（genymotion需要依赖VirtualBox虚拟机，下载选项中提供了包含VirtualBox和不包含的选项，请按需选择）
2. 打开Genymotion。如果你还没有安装VirtualBox，则此时会提示你安装
3. 创建一个新模拟器并启动
4. 启动React Native应用后，可以按下F1来打开开发者菜单
个人使用的是夜神模拟器

测试安装

初始化

初始化项目
react-native init reactNativeDemo && cd reactNativeDemo
打开安卓模拟器

命令行(在模拟器的bin目录新建nox_connect.bat并快捷方式到桌面)：

# 模拟器的bin目录
nox_adb.exe connect 127.0.0.1:62001
adb connect 127.0.0.1:62001

问题：gradle 下载不下来
1. 下载 gradle-2.14.1-all.zip 放到：android/gradle/wrapper/下
2. 修改：gradle-wrapper.properties： distributionUrl=gradle-2.14.1-all.zip

启动项目(创建启动文件start.bat)

# 项目目录
react-native run-android

处理红屏
红屏->摇一摇->Dev Settings->debug server host&port for device:ipconfig中的ip:8081->重启项目

修改项目

编辑App.js~~(index.android.js)~~->按两下R键，或Menu键（通常是F2，在Genymotion模拟器中是⌘+M）打开开发者菜单->选择 Reload JS
查看日志：（终端或命令行）运行adb logcat *:S ReactNative:V ReactNativeJS:V

真机调试

USB调试

开启USB调试
1. 设置->…->开发者模式->usb 调试
  小米6:设置->我的设备->全部参数->连续点击MIUI版本->返回上一级->更多设置
查看连接的设备：adb devices
（关闭模拟器，保持只有一台设备连接）
启动程序
1. 用IDE启用（保持ide 服务开启）:react-native start --port 9999
2. react-native run-android
3. react-native run-android --variant=release来安装release版的应用
  注：白屏情况：开启悬浮窗权限（应用软件管理-软件-权限-浮窗权限）
卸载原App: adb uninstall packageName
重新编译：cd android && gradlew clean
删掉\android\app\build\下的所有文件夹，重新React-native run-android

常见问题

主机中的软件终止了一个已经建立的连接：

 adb kill-server&&adb start-server
 DDMS - Devices - Reset adb

开着两个IDE导致端口占用

 #查看adb server的端口
 adb nodaemon server
 #占用端口5037的PID值
 netstat -a -n -o |findstr "5037"
 DDMS - Devices - Reset adb
 #查看进程名
 tasklist /v | findstr 5096
 #杀死占用5037端口
 taskkill /f -pid 5096   taskkill /im tadb.exe

wifi 调试

保持adb devices有一台设备连接着
确保电脑和手机设备在同一个Wi-Fi环境下
在设备上运行你的React Native应用
摇晃设备，或者运行adb shell input keyevent 82–>开发者菜单：Dev Settings->Debug server host for device->电脑的(ipconfig)IP地址和端口号->开发者菜单->Reload JS

开启debug

修改(因为要导包建议使用IDE工具修改) src/main/Java/MainApplication的 onCreate方法：

@Override
public void onCreate() {
  super.onCreate();
  //SoLoader.init(this, /* native exopackage */ false);
  SharedPreferences mPreferences =    PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
  mPreferences.edit().putString("debug_http_host","localhost:8099").commit();
}