工具準(zhǔn)備：

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

使用官網(wǎng)最新即可

更改源：

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

React Native命令行工具

命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包(packager)等任務(wù)。測試react-native 是否可以執(zhí)行，不能執(zhí)行的話，請重新安裝對應(yīng)版本的nodejs

npm install -g react-native-cli

初始化項(xiàng)目：

進(jìn)入想要?jiǎng)?chuàng)建項(xiàng)目的目錄中執(zhí)行：

react-native init HelloWord

初始化完畢

使用WebStorm+Android Studio 模擬器運(yùn)行項(xiàng)目(推薦使用webstorm11 201602新版)

使用webstorm打開剛才的項(xiàng)目，如圖：

如圖

設(shè)置默認(rèn)編碼格式：

更改默認(rèn)編碼格式

點(diǎn)擊download引入指定的lib：

lib庫

啟動(dòng)android studio默認(rèn)的模擬器：

常用配置

回到之前生成HelloWord目錄中，執(zhí)行如下命令即可

react-native run-android

第一次執(zhí)行通常報(bào)錯(cuò)，如圖，需要將模擬器和電腦綁定：

報(bào)錯(cuò)

step1

step2

step3

step4

成功

解決windows平臺(tái)熱更新問題：

在項(xiàng)目的目錄下搜索FileWatcher目錄，進(jìn)入后修改對應(yīng)的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);

});

});

}

以管理員身份運(yùn)行cmd，清理緩存，重新執(zhí)行項(xiàng)目即可:

npm cache clean

總結(jié)

以上是生活随笔為你收集整理的webstorm 运行android,Windows React Native环境搭建:webstorm+android studio 及解决热更新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。