工具准备:
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:
- 启动android studio默认的模拟器:
- 回到之前生成HelloWord目录中,执行如下命令即可
react-native run-android
-
第一次执行通常报错,如图,需要将模拟器和电脑绑定:
解决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