准备

安装git

下载git

安装java

配置好JAVA_HOME环境变量,并把JAVA_HOME/bin添加到path里

JDK版本管理工具

安装gradle

下载gradle: (若安装过idea之类的工具可以看看~/.gradle/wrapper/dists目录下有没有)

配置GRADLE_HOME环境变量, 并把GRADLE_HOME/bin添加到path里

安装node.js

下载Node.js

nvm node版本管理工具

安装react-native-cli

1
2
# 打开git bash
npm isntall -g react-native-cli

安装android-sdk

  • 下载地址

  • 配置ANDROID_HOME环境变量, 并把%ANDROID_HOME%/tools %ANDROID_HOME%/platform-tools添加到path里

  • 打开sdk-manager下载以下组件

    • Tools/Android SDK toll
    • Tools/Android SDK Platform-tools
    • Tools/Adnroid SDK Build-tools 23.0.1
    • Android 6.0(API 23)/SDK Platform 23
    • Android 6.0(API 23)/Google APIs
    • Extras/Android Support Repository 35
    • Extras/Google USB Driver

      换android 的源 看最后一段

测试

  1. 用USB连接手机
  2. 打开git bash 初始化项目
    1
    2
    3
    4
    react-native init demo
    cd demo
    react-native start
    react-natve run-android

然后用喜欢的编辑器或IDE 打开项目开发即可

配置调试环境

用chrome 浏览器打开, http://localhost:8081/debugger-ui

按F12 打开开发控制台

拿走打机摇一摇, 在弹出的开发者菜单上选择Debug JS Remotely

启用代码热更新, 如果想电脑上改js,手机限时生效可以把Enable live Reload 和 Enable Hot Reloading 打开

再次打开手机的开发者菜单, 选择reload

如果网页上最后一行显示为: Status: Debugger session #0 active. 时说明已经连接上了调试环境.

转到chrome开发者控制台Rouces页签上,在左边debuggerWorker.js 下载找到要调试的js文件,
加上断点,即可调试

注意事项

  1. 若一开始就显示红屏, 不能下载js之类的, 在手机可以打开react-native应用的开发者菜单(摇一摇手机), 选择dev setting, 在最后一项设置电脑的ip与端口.

  2. 若手机是android 5.0以上红屏的话,在git bash上执行adb reverse tcp:8081 tcp:8081