天天看点

在windows上搭建React Native开发环境

最近要学习React Native,但是在window上搭建开发环境的时候遇到了些问题,以至于一直没有搭建好开发环境。

React Native相关项目及文档:

react-native的GitHub地址:https://github.com/facebook/react-native

react-native的文档地址:http://facebook.github.io/react-native/docs/getting-started.html

window上搭建React Native开发环境其问题及操作步骤:

一、准备工作

1、安装Git from Windows,并确保path中有git的环境变量可以在命令中使用。

2、有Android SDK并配置ANDROID_HOME环境推荐,将SDK的platform-tools子目录加入系统PATH环境变量。。

3、安装node.js最新版,一定是最新版,否则在执行init初始化项目的时候,会出现问题。

二、开始操作

1、配置我们下载的国内镜像路径(因为众所周知的网络问题)

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

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

2、安装react-native命令行工具

npm install -g react-native-cli

3、在window上cd到你的工作目录下创建项目

react-native init MyProject

这个过程可能比较长,需要等待下载。

4、输入react-native start命令运行packager并进行查看,可以看到端口号为8081

在windows上搭建React Native开发环境
在windows上搭建React Native开发环境

如果你遇到了

ERROR Watcher took too long to load

的报错,请尝试修改

node_modules/react-native/packager/react-packager/src/FileWatcher/index.js

,将其中的MAX_WAIT_TIME 从120000改为更大的值(单位是毫秒)

在浏览器输入地址:http://localhost:8081/index.android.bundle?platform=android查看是否显示打包后的脚本。

5、运行模拟器或准备好真机,如果是真机要配置好驱动,使得adb devices可以看到对应的设备。

6、安卓运行

保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

在windows上搭建React Native开发环境

如上图说明成功了。

如果报Activity class {package/class} does not exist,说明存在相同报名修改package就可以了。

首次运行需要等待数分钟并从网上下载gradle依赖。

运行完毕后可以在模拟器或真机上看到应用自动启动了。

如果gradle依赖下载出现报错,请多试几次,或者设置VPN加速。

如果apk安装运行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。

至此,应该能看到APP运行,并报错 Unable to download JS bundle

摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的

正在运行packager的那台电脑的局域网IP加:8081

(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。

如果真实设备白屏但没有弹出任何报错,可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。

如果reload JS不可以还是红屏,控制台报错:TransformError: E:\nodejsproject\react\hello\node_modules\react-native\node_modules\react-transform-hmr\node_modules\react-proxy\node_mod ules\react-deep-force-update\lib\index.js: [BABEL] E:\nodejsproject\react\hello\node_modules\react-native\node_modules\react-transform-hmr\node_mo dules\react-proxy\node_modules\react-deep-force-update\lib\index.js: Unknown option: E:\nodejsproject\react\hello\node_modules\react-native\node_m odules\react-transform-hmr\node_modules\react-proxy\node_modules\react-deep-force-update.babelrc.stage

则可是因为新版本用的是babel 6版本,可是有些依赖的库并不是这个版本,就会导致这个错,所以解决方案就是把这个所以babel删了,升级依赖。

解决办法为删除项目下t\node_modules\react-deep-force-update\.babelrc 重新启动执行react-native start

在windows上搭建React Native开发环境

PS:在因为网络问题不可以初始化文件的情况下可以下载其他人初始化成功的项目

三、安卓调试

打开Chrome,访问 http://localhost:8081/debugger-ui,应当能看到一个页面。按F12打开开发者菜单。

在模拟器或真机菜单中选择Debug JS,即可开始调试。

四:配置搭建React Native 环境参考文章:

安装JDK

从Java官网下载JDK并安装。请注意选择x86还是x64版本。

推荐将JDK的bin目录加入系统PATH环境变量。

安装AndroidSDK

可以单独安装AndroidSDK,也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio,以下说明会默认以AndroidStudio的方式说明。请注意选择x86还是x64版本。

为了加速下载,推荐从AndroidDevTools下载。

然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager),确保以下项目已经安装并更新到最新:

  • Tools/Android SDK Tools (24.3.3)
  • Tools/Android SDK Platform-tools (22)
  • Tools/Android SDK Build-tools (23.0.1)
  • Android 6.0 (API 23)/SDK Platform (1)
  • Extras/Android Support Library(23.0.1)
  • Extras/Android Support Repository

    推荐使用腾讯Bugly的镜像加速下载。查看说明

    推荐将SDK的platform-tools子目录加入系统PATH环境变量。

    安装C++环境

    推荐从itellyou下载并安装Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。

    安装msysgit

    虽然不知道为什么init那一步需要用到这个东西,在这里下载安装。

    安装Python

    从官网下载并安装python 2.7.x

    安装node.js

    从官网下载node.js的官方4.1版本或更高版本。

    建议设置npm镜像以加速后面的过程(或使用科学上网工具)。

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

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

    安装react-native命令行工具

    npm install -g react-native-cli

    创建项目

    进入你的工作目录,运行

    react-native init MyProject

    并耐心等待数(或数十)分钟。

    0.14版本中带来了一个新的问题以至于在windows下引用图片不能成功(在0.15后修复),请参考这里进行对应修改以绕过此BUG。

    运行packager

    react-native start

    可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本。第一次访问通常需要十几秒,并且在packager的命令行可以看到进度条。

    如果你遇到了ERROR Watcher took too long to load的报错,请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,将其中的MAX_WAIT_TIME 从25000改为更大的值(单位是毫秒)

    运行模拟器

    推荐使用BlueStacks不过要小心它推送的广告和垃圾应用。

    如果有真机,可以不必运行模拟器,要配置好驱动,使得adb devices可以看到对应的设备。

    安卓运行

    保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

    react-native run-android

    首次运行需要等待数分钟并从网上下载gradle依赖。

    运行完毕后可以在模拟器或真机上看到应用自动启动了。

    如果gradle依赖下载出现报错,请多试几次,或者设置VPN加速。

    如果apk安装运行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。

    至此,应该能看到APP运行,并报错 Unable to download JS bundle

    摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。

    如果真实设备白屏但没有弹出任何报错,可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。

    安卓调试

    打开Chrome,访问 http://localhost:8081/debugger-ui,应当能看到一个页面。按F12打开开发者菜单。

    在模拟器或真机菜单中选择Debug JS,即可开始调试。

继续阅读