操作系统：windows

调试：

开启调试菜单的方法：

  • 摇动手机
  • CTRL + M
  • 菜单键
  • F1

代码实时更新。

  • 双击R 键
  • Live reload, 实时加载。
    有时候更改代码后，刷新界面无效果。解决方法如下：　　
    打开目录app_name\node_modules\react-native\packager\react-packager\src\node-haste\FileWatcher下的index.js文件，修改如下代码(红色部分)
    修改变量MAX_WAIT_TIME：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    // var MAX_WAIT_TIME = 120000;
    var MAX_WAIT_TIME = 360000;

        key: '_createWatcher',
        value: function _createWatcher(rootConfig) {
          var watcher = new WatcherClass(rootConfig.dir, {
            glob: rootConfig.globs,
            dot: false
          });

          return new Promise(function (resolve, reject) {

            const rejectTimeout = setTimeout(function() {
              reject(new Error([
                'Watcher took too long to load',
                'Try running `watchman version` from your terminal',
                'https://facebook.github.io/watchman/docs/troubleshooting.html',
              ].join('\n')));
            }, MAX_WAIT_TIME);

            watcher.once('ready', function () {
              clearTimeout(rejectTimeout);
              resolve(watcher);
            });
          });
        }

JS调试

在调试菜单中打开：Debug JS Remotely. 会自动在浏览器中打开地址：http://localhost:8081/debugger-ui

打包：

使用jdk中的keytool 生成android apk签名：

在JDK的bin目录下执行： 

keytool -genkey -alias android.keystore -keyalg RSA -validity 20000 -keystore android.keystore

将生成的 android.keystore 文件拷贝至项目的android/app目录下

更改文件android/app/build.gradle：

添加配置：

1
2
3
4
5
6
7
8
signingConfigs {
        release {
            storeFile file('android.keystore') //数字证书文件
            storePassword '123456' //密码
            keyAlias 'android.keystore' //数字证书别名
            keyPassword '123456' //密码
        }
}

图片
将配置添加到buildTypes.release中，如图中第二个红框

生成apk

在android目录下执行： 

gradlew assembleRelease

然后等待，需要几分钟时间。
生成的apk文件在目录android/app/build/outputs/apk下

本文地址： http://gehaiqing.com/2016/11/06/react-native-debug-pack/