Windows React Native环境搭建:webstorm+android studio 及解决热更新

工具准备：

SDK

• Android SDK Build-tools：23.0.1
• SDK Platform：Android N 、6.0 、5.1.1、5.0.1、4.4.2、4.1.2
• Android模拟器镜像：6.0、5.1和4.1

python

• 使用 python2

nodejs

• 使用官网最新即可

更改源：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

React Native命令行工具

• 命令行工具用于执行创建、初始化、更新项目、运行打包（packager）等任务。测试react-native 是否可以执行，不能执行的话，请重新安装对应版本的nodejs

npm install -g react-native-cli

初始化项目：

• 进入想要创建项目的目录中执行：

react-native init HelloWord

初始化完毕

使用WebStorm+Android Studio 模拟器运行项目（推荐使用webstorm11 201602新版）

• 使用webstorm打开刚才的项目，如图：

如图

设置默认编码格式：

更改默认编码格式

点击download引入指定的lib：

lib库

• 启动android studio默认的模拟器：

常用配置

• 回到之前生成HelloWord目录中，执行如下命令即可

react-native run-android

• 第一次执行通常报错，如图，需要将模拟器和电脑绑定：

  
  
  

  报错
  
  
  

  step1
  
  
  

  step2
  
  
  

  step3
  
  
  

  step4
  
  
  

  成功

解决windows平台热更新问题：

• 在项目的目录下搜索FileWatcher目录，进入后修改对应的index.js文件

   // 修改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) {
        var rejectTimeout = setTimeout(function () {
          return reject(new Error(timeoutMessage(WatcherClass)));
        }, MAX_WAIT_TIME);
  
        watcher.once('ready', function () {
          clearTimeout(rejectTimeout);
          resolve(watcher);
        });
      });
    }
  //修改为
  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);
        });
      });
    }
  

• 以管理员身份运行cmd，清理缓存，重新执行项目即可:

npm cache clean