在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

如果你遇到了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开启，另外打开一个命令行窗口，然后在工程目录下运行

如上图说明成功了。

如果报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

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 configsetregistryhttps://registry.npm.taobao.orgnpm configsetdisturlhttps://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，即可开始调试。

在windows上搭建React Native开发环境相关推荐

[转] 在Mac上搭建React Native开发环境
原文链接: http://blog.csdn.net/xiangzhihong8/article/details/53914336 概述前面我们介绍过在window环境下开发React Native ...
windows 下配置 react native 开发环境
windows 下配置 react native 开发环境安装nvm 由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm. 你可以 ...
【挑战】手机Termux搭建React Native开发环境
我这里选用alpine来做开发环境,主要因为它体积小巧,方便移植和分享.如果只是我自己使用的话,我更喜欢使用ubuntu或者archlinux.alpine做开发环境,可能会遇到的问题就是中文语言环境 ...
windows上搭建python+gvim开发环境
参照了 http://www.cnblogs.com/xd502djj/archive/2010/09/16/1827683.html ,发现有些问题,所以修改了一些. Vim as Python I ...
Android之Windows下搭建React Native Android开发环境（差不多搞了一天）
Android之Windows下搭建React Native Android开发环境穷逼买不起mac,但是他们都说React Native Android只能在mac下面 ...
Windows环境下安装React Native开发环境----记一次填坑过程
前言集成React Native开发环境遇到各个坑,调试了很久出现过找不到设备,百度上个别人的资料有误被绕来绕去耽误了很多时间,下载慢等待时间过长等问题,最后多方查阅资料,电脑重启等操作终于部署好了 ...
Windows下搭建ARM11裸机开发环境(1):工具安装
By: Ailson Jack Date: 2019.05.04 个人博客:http://www.only2fire.com/ 本文在我博客的地址是:http://www.only2fire.com/ ...
Windows下搭建ARM11裸机开发环境(3):Eclipse+JLink调试代码
By: Ailson Jack Date: 2019.05.17 个人博客:http://www.only2fire.com/ 本文在我博客的地址是:http://www.only2fire.com/ ...
如何在Windows下搭建Qt安卓开发环境？
一.导读本文描述如何在Windows下搭建Qt安卓开发环境,由于Qt维护的安卓开发环境和安卓开发环境在很大程度上不兼容,所以在选择Qt版本的时候需要注意:在JDK和Android SDK环境的选择上 ...

在windows上搭建React Native开发环境

在windows上搭建React Native开发环境相关推荐

最新文章

热门文章