星空网 > 软件开发 > 操作系统

windows下react

第一步:安装Java
1.下载JDK,选择适应自己的机型;官网地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
2.配置环境,问度娘:http://jingyan.baidu.com/article/f966**8b38e0894e3c1bef.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下reactimages/loading.gif' data-original="http://images2015.cnblogs.com/blog/1206047/201707/1206047-20170724173922356-499621300.png" >

windows下react

windows下react

 


第三步:安装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
 
第七步: 连接设备或者模拟器 这里推荐设备
再打开一个命令窗口,运行adb devices,如果正确配置了Android SDK环境变量,我们在docs命令控制行中运行应该可以看到下面界面:
  windows下react
我们看到列表为空,是因为我们还未连接任何设备。我通过USB接入手机,再运行看看: 
windows下react

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


有时候我这会出现如下问题:
windows下react

 应该是端口号被占用,我这里总被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

 


因为本文所用的demo文件中很多版本号过于旧,我们需要改成自己下载的版本号,具体方法如下所示:
a.查看目录,没有23.0.2这个版本
windows下react

 


找到AwesomeProject下的android下app修改他的build.gradle文件:
 
windows下react
将 buildToolsVersion改成自己下载的版本号:
windows下react
b.把Android项目下的build.gradle中
windows下react
改成classpath 'com.android.tools.build:gradle:1.2.3';
然后将测试的手机中所有安全软件都关闭,再次运行react-native run-android:
windows下react
出现上图表示成功。
 
第九步:运行程序
一般会出现如图表示成功
windows下react

 


 
当出现程序白屏时,找到并开启AwesomeProject的悬浮窗权限。 设置 --> 其他应用管理 --> 已下载 --> 点击AwesomeProject --> 权限管理 --> 显示悬浮窗 --> 允许 。
如果看到一个大红色的报错,这个报错是因为app获取不到packager生成的jsbundle文件,我们打开AwesomeProject,摇晃一下设备,就会看到下面的界面:
windows下react

 


点击Reload JS成功的话就可以看到我们期待已久的welcome to React Native!
 
接下来就可在index.android.js或者index.ios.js文件中进行编辑。



原标题:windows下react

关键词:Windows

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Kilimall:海运集货备货FBK(肯尼亚内罗毕仓)召集令:https://www.goluckyvip.com/news/3254.html
你的Shopee铺货和大卖的铺货,究竟差在哪里?:https://www.goluckyvip.com/news/3255.html
海关总署:禁止从葡萄牙输入羊及其相关产品:https://www.goluckyvip.com/news/3256.html
亚马逊将员工居家办公时间延长刀明年1月 仓储员工除外:https://www.goluckyvip.com/news/3257.html
英国明年将退出欧盟单一市场和海关联盟:https://www.goluckyvip.com/news/3258.html
亚马逊计划在德克萨斯州开设新的物流中心:https://www.goluckyvip.com/news/3259.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流