React-Native学习笔记

·React-native的安装

·React-native的环境配置

·React-native的运行

·Android 环境下的调试

 

＃React-native的安装

 

Homebrew   Mac 中的一个包管理器
Node.js 和 npm
安装 watchman 和 flow
这两个包分别是监控文件变化和类型检查的。安装如下：
brew install watchman
brew install flow
安装 React-Native
通过 npm安装即可：
npm install -g react-native-cli

 

 

 

＃React-native的环境配置

App开发环境的设置
iOS
XCode 6.3 及其以上即可。
Android
设置环境变量：ANDROID_HOME
export ANDROID_HOME=/usr/local/opt/android-sdk
SDK Manager 安装以下包：
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository

  

 

＃React-native的运行

不管是 iOS 还是 Android，在开发调试阶段，都需要在 Mac 上启动一个 HTTP 服务，称为“Debug Server”，默认运行在 8081 端口，APP 通 Debug Server 加载 js。
 
iOS 和 Android 的模拟器，连接 Mac 本机的服务都很方便。但是通过 USB 或者 WiFi 连接调试，就稍微麻烦一些了。
 
iOS版运行
命令:react-native start -> 用xcode打开ios工程 ->在模拟器中运行
Android版运行
命令:react-native start ->  android studio打开工程->在模拟器中运行
或React-native run-android

  

 

 

＃Android 环境下的调试

示例 App 直接部署到真机，红色界面报错，无法连接到 Debug Server。
 
如果是 5.0 或者以上机型，可通过 adb 反向代理端口，将 Mac 端口反向代理到测试机上。
 
adb reverse tcp:8081 tcp:8081
如果 5.0 以下机器，应用安装到测试机上之后，摇动设备，在弹出菜单中选择 Dev Setting > Debug Server host for device，然后填入 Mac 的 IP 地址（ifconfig 命令可查看本机 IP）
adb shell input keyevent 82 (部分机型无菜单键需要执行此命令打开菜单)
adb shell input keyevent <keycode> 其中<keycode>表示按键代码，{ “MENU”, 82 }代表菜单键