windows下react-native搭建环境

摘要:
其中E:/AwesomeProject/gradle-2.4-all.zip为你下载gradle后所保存的地址。
第一步:安装Java
1.下载JDK,选择适应自己的机型;官网地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
2.配置环境,问度娘:http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html
第二步:下载安装Android SDK
1.直接下载SDK Tools,然后通过SDKManager安装react-native运行所需要的环境,注意选择x64还是x86。
官网下载地址:https://developer.android.com/sdk/installing/index.html
国内下载地址:http://androiddevtools.cn/
2.设置SDK:点击右下角configure,打开SDK Manager,我们需要安装以下项目的最新版本:
Tools/Android SDK Tools
Tools/Android SDK Platform-tools
Tools/Android SDK Build-tools
Android 6.0 (API 23)/SDK Platform
Extras/Android Support Library
Extras/Local Maven repository for Support Libraries
windows下react-native搭建环境第1张

windows下react-native搭建环境第2张

windows下react-native搭建环境第3张

第三步:安装node.js,git
第四步:安装react-native命令行工具
1.打开命令窗口,输入npm install -g react-native-cli
第五步:创建react-native项目
新建一个文件夹,利用命令控制窗口进入文件夹初始化一个项目:react-native init AwesomeProject
如果你网络不怎么样,这里会耗时相当相当久,甚至经常因为网络的原因下载项目失败!所以react-native中文官网推荐你使用淘宝镜像:$ npm config set registry https://registry.npm.taobao.org
第六步:运行packager:
1.cd AwesomeProject
2.npm start
显示下图表示成功
windows下react-native搭建环境第4张
第七步: 连接设备或者模拟器 这里推荐设备
再打开一个命令窗口,运行adb devices,如果正确配置了Android SDK环境变量,我们在docs命令控制行中运行应该可以看到下面界面:
windows下react-native搭建环境第5张
我们看到列表为空,是因为我们还未连接任何设备。我通过USB接入手机,再运行看看:
windows下react-native搭建环境第6张

我们可以看到设备号为42048543c...表示已经连接成功。

有时候我这会出现如下问题:
windows下react-native搭建环境第7张

应该是端口号被占用,我这里总被360手机助手占用,一般我都连接成功后退出360手机助手,然后重新npm start之后重复第七步。如若adb安装成功,还是这里出现这个问题的话解决不了就百度一下或者尝试重新插手机。

第八步:编译运行Android:
AwesomeProject目录下运行$ react-native run-android,就会构建工程并自动安装到你的模拟器或者设备,(如果关闭了npm start运行窗口就会同时启动用于实现动态代码加载的Node服务)。
第一次运行的时候,会下载gradle文件,该文件下载时间太过于漫长,解决办法如下:
1.打开http://androiddevtools.cn/找到gradle-2.4-all.zip这个文件的下载地址:http://pan.baidu.com/s/1c0dcgfe,将它下载到本地。
2.用编译器打开AwesomeProject文件夹中的android文件中的gradle下的wrapper找到gradle-wrapper.properties文件,将其中的distributionUrl=https://services.gradle.org/distributions/gradle-2.4-all.zip改为distributionUrl=file:///E:/AwesomeProject/gradle-2.4-all.zip,让它本地离线下载。其中E:/AwesomeProject/gradle-2.4-all.zip为你下载gradle后所保存的地址。
graddle构建过程中会下载很多jar包,如果出现下载失败,多重试几次。
3.当下在完grandle后一定会报错,如图:
windows下react-native搭建环境第8张
因为本文所用的demo文件中很多版本号过于旧,我们需要改成自己下载的版本号,具体方法如下所示:
a.查看目录,没有23.0.2这个版本
windows下react-native搭建环境第9张
找到AwesomeProject下的android下app修改他的build.gradle文件:
windows下react-native搭建环境第10张
将 buildToolsVersion改成自己下载的版本号:
windows下react-native搭建环境第11张
b.把Android项目下的build.gradle中
windows下react-native搭建环境第12张
改成classpath 'com.android.tools.build:gradle:1.2.3';
然后将测试的手机中所有安全软件都关闭,再次运行react-native run-android:
windows下react-native搭建环境第13张
出现上图表示成功。
第九步:运行程序
一般会出现如图表示成功
windows下react-native搭建环境第14张
当出现程序白屏时,找到并开启AwesomeProject的悬浮窗权限。设置 --> 其他应用管理 --> 已下载 --> 点击AwesomeProject --> 权限管理 --> 显示悬浮窗 --> 允许。
如果看到一个大红色的报错,这个报错是因为app获取不到packager生成的jsbundle文件,我们打开AwesomeProject,摇晃一下设备,就会看到下面的界面:
windows下react-native搭建环境第15张
点击Reload JS成功的话就可以看到我们期待已久的welcome to React Native!
接下来就可在index.android.js或者index.ios.js文件中进行编辑。

免责声明:文章转载自《windows下react-native搭建环境》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇和小猪一起搞微信公众号开发—创建自定义菜单left join 显示多条数据,把数据转换成一行。下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

IOS内购支付服务器验证模式

IOS 内购支付两种模式: 内置模式 服务器模式 内置模式的流程: app从app store 获取产品信息 用户选择需要购买的产品 app发送支付请求到app store app store 处理支付请求,并返回transaction信息 app将购买的内容展示给用户 服务器模式的流程: app从服务器获取产品标识列表 app从app s...

程序员应具备的PS基本技能(三):程序员使用PSD源文件切图

若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/article/details/102478062本文章博客地址:https://blog.csdn.net/qq21497936/article/details...

云端远程Ubuntu系统进行无桌面Web浏览器自动化测试

【摘要】 利用xvfb提供的显卡帧缓冲区,让浏览器以为有桌面,以达到无桌面系统下测试真实浏览器兼容性的目的。 自动化web界面测试往往需要验证真实浏览器的兼容性,但是云端系统往往并不提供图形化的桌面,所以自动化web界面测试在云端就成为一个问题。本文描述了一个技巧解决这个问题,其主要原理是利用xvfb提供的显卡帧缓冲区,让浏览器以为有桌面。 Install...

build-essential

linux操作系统上面开发程序, 光有了gcc 是不行的它还需要一个 build-essential软件包作用是提供编译程序必须软件包的列表信息 也就是说 编译程序有了这个软件包它才知道 头文件在哪 才知道库函数在哪还会下载依赖的软件包 最后才组成一个开发环境当然 build-essential包 安装时 需要的依赖包 有些你用不上 软件包: build-...

html网站网址一键打包成App平台-开心App平台

开心APP在线打包平台可以快速封装网站变成APP,一键打包网站APP平台的出现,极大的降低的开发费用,几百块就可以制作一个体验不错的APP。 网站封装成APP的流程方便快捷!无需懂代码,会上网就能制作APP! 下面介绍使用开心APP平台将一个网站快速打包成APP 分七步进行 1、注册开心APP平台账号 2、创建APP、配置基本信息 3、配置扩展插件 4、配...

在安卓手机上通过虚拟机运行Windows XP

细数当年的桌面版Windows,似乎针对ARM架构处理器的版本并不多,笔者曾用过一段时间的Windows RT,对它流畅的操作和强大的完整版Office非常满意,然而Windows RT却因不能升级到Windows10而与UWP应用无缘。Windows RT虽被微软宣布了“死缓”,但这并不意味着你不能在ARM架构的处理器上运行桌面版Windows。相信很多...