React Native 项目环境配置、调试以及打包

去年在做React Native混合开发的时候，写过几篇笔记：
react-native对android物理返回键back的监听以及基类封装
react native导航navigator
react-native 与安卓端通信
android 端集成react native
Fetch 网络请求简单封装，支持超时入口

下面说正题吧！今天客服提了一个去年使用React Native混合开发时遗留下来的bug。最担心的的事情还是发生了。今年电脑换了新系统，去年的RN环境早已作废。当初做完这个快一年了，如今回头过来重新搭建环境，由于没有做相关方面的笔记，还真是记不起来了。那么接下来看看环境配置和调试吧。

环境搭建

这里就不赘述了，看React Native中文网搭建开发环境。

项目环境配置

1、Project级别的gradle配置：

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'
        ...
    }
}

2、Modual级别的gradle配置，buildToolsVersion设置为23.0.1：

android { 
    compileSdkVersion 23
    buildToolsVersion '23.0.1'
    ...
    }

3、gradle-wrapper.properties设置如下：

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

4、React Native的package.json版本要求比较高，我编译通过的版本如下，可供参考：

{
  "name": "project-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2",
    "react-native-modal-dropdown": "^0.4.2",
    "react-native-scrollable-tab-view": "^0.6.5",
    "react-native-swRefresh": "^1.2.3",
    "react-native-swiper": "^1.5.4"
  },
  "devDependencies": {
    "babel-jest": "19.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "19.0.0",
    "react-test-renderer": "15.4.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

调试

1、首先调试需要先连接develop server，以下是常用的连接develop server的指令：

$ adb devices  //显示连接的设备信息

$ adb reverse tcp:8081 tcp:8081  //连接设备命令，如果设备断开，可以尝试用这个命令建立连接

$ react-native run-android  //在设备上安装并启动应用
$ react-native run-android --variant=release  //安装release版的应用，需要先配置好签名

2、调试的时候，需要先跳转到RN界面，然后摇一摇手机，在弹出菜单中选择调试选项，浏览器端就会出现调试页面，点击Ctrl + Shift + J 就可以进行调试了。（ps ：鄙人以前干的是Android开发，所以和IOS端Xcode的调试方法不一样）

3、遇到的常见错误及解决办法 https://blog.csdn.net/real_bird/article/details/55509927。

打包

做混合开发的时候，要先打包RN代码，然后再打包Android代码。打包RN代码指令如下，项目根目录下运行以下指令：

React-native bundle --entry-file index.android.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --assets-dest ./android/app/src/main/res/ --dev false

打包成功后，就可以可以在./android/app/src/main/assets/index.android.bundle下看到打包好的RN代码文件了。接下来就可以打包整个Android APK了。