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 }代表菜单键

  

相关推荐