文档章节

Win10下React Native环境安装教程及错误处理办法(实测)

j
 james_laughing
发布于 09/19 14:48
字数 1598
阅读 3
收藏 0

https://blog.csdn.net/zhangatle/article/details/53289471

 

准备工作

注意:小米手机MIUI有坑,文末有解决方法
  • 1

首先,你需要先安装Node.js并进行环境变量的配置,具体可以参考我的另一篇文章nodejs在windows下的安装配置(使用NVM的方式),或者你也可以直接下载安装包进行安装,然后进行环境变量的配置工作,这里不再重复说明,不懂的可以参考其它教程;然后进行Java Development Kit(JDK)的安装和环境变量的配置,这里也不再介绍,这不是本文的重点,以上工作完成以后,下面正式开始!

注意:由于众所周知的原因,国内一些网站被屏蔽,这里要想办法进行处理,你可以采用vpn的方式,这里我采用的是替换系统的hosts文件的方式,这里一定要处理好,不然后面的步骤无法进行

到这里,基本的前期准备工作就完成了,下面正式开始

正式开始

安装Android Studio并配置Android虚拟机

1,下载Android Studio安装包,然后进行下面的步骤

2,双击安装包进行安装,点击进行下一步 
安装界面

3,勾选箭头的两处,一个是SDK的安装,一个是虚拟机的安装, 
这里写图片描述

4,安装位置的选择,你可以选择一个位置,但是路径中最好不要出现中文,这里我采用默认路径 
这里写图片描述

5,然后点击next进行安装,安装需要一定的时间,等待就行,然后next 
这里写图片描述

6,点Finish完成Android Studio的安装 
这里写图片描述

7,进行环境变量的配置,请确保红色框中的变量配置完毕(根据自己的安装位置设置) 
这里写图片描述 
这里写图片描述

8,打开命令行窗口,输入android,进行到Android SDK Manger,下载我们需要的SDK 
这里写图片描述

9,切换到Android 6.0选项卡,注意:必须选择这项,因为React Native目前必须要这个版本的,然后就是等待下载并安装,安装完成后关闭就行 
Android SDK Build-tools必须选择23.0.1,否则后面会出现错误 
这里写图片描述
这里写图片描述

顺便提一下,我用的hosts,下载速度还是蛮快的 
这里写图片描述

10,下载进行安卓虚拟机的配置,当然,也可以用真机进行测试,后面会介绍,首先打开Android Studio,新建一个空白工程 
这里写图片描述

11,根据需要进行配置,我采用默认设置 
这里写图片描述

12,下一步就行 
这里写图片描述

这里写图片描述

13,点击箭头的处的图标,进行虚拟机的配置,进行适合自己的配置就行 
这里写图片描述

14,然后就可以打开虚拟机,并开机运行了 
这里写图片描述, 
这里写图片描述

15,至此,Android相关的配置工作就结束了,下面进行React Native工程的构建

安装Android Studio

1,初始化React Native

打开命令行窗口

在弹出的命令框当中输入以下指令,回车

npm config set registry https://registry.npm.taobao.org --global
  • 1

输入完成后,回车,输入下一条指令

npm config set disturl https://npm.taobao.org/dist --global
  • 1

输入指令的目的是在于将npm下载的地址转为国内的地址,加快下载速度

设置完地址后,接下来需要安装react-native-cli,在命令行当中输入如下指令,回车,进行全局安装:

npm install -g react-native-cli
  • 1
  • 2

这里写图片描述

安装成功后,界面如下 
这里写图片描述

注意: 
react-native-cli是一个终端命令,它可以完成其余的设置工作。它可以通过npm安装。刚才这条命令会往你的终端安装一个叫做react-native 
的命令。这个安装过程你只需要进行一次。

安装React Native 
切换到我们的工作空间目录,也就是你想把你的React Native工程安装在哪,这里我安装到D盘的react目录下,可以根据个人需要更改,然后在命令行中切换到该目录 
这里写图片描述

接着,初始化一个react-native项目,在命令行中输入如下指令,回车:

react-native init MyProject
  • 1

这个命令会初始化一个叫做MyProject工程、下载React Native的所有源代码和依赖包

出现如下字样时,请耐心等待 
这里写图片描述

安装完成 
这里写图片描述

注意安装完成后的提示,这告诉我们怎么在IOS和Android运行我们的工程

To run your app on iOS:
   cd D:\react\MyProject
   react-native run-ios
   - or -
   Open D:\react\MyProject\ios\MyProject.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd D:\react\MyProject
   react-native run-android
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

切换到我的工程目录,D:\react\MyProject(换成你自己的) 
执行以下命令

react-native run-android
  • 1

出现以下界面,等待,表示正在进行相关文件的下载与配置 
这里写图片描述

成功

在浏览器中输入以下地址,如果页面中出现JS代码,代表成功

http://localhost:8081/index.android.bundle?platform=android
  • 1

这里写图片描述

这里写图片描述

至此,安装成功 
这里写图片描述

成功后手机界面 
这里写图片描述

进行React Native开发 
接下来就可以用Android Studio或者Webstorm等开发工具进行开发了!

我配置过程中遇到的错误及解决方法 
这里写图片描述

提示我没有安装23.0.1的Android SDK Build-tools,进行安装后就没有问题了
  • 1

还有一个问题比较坑,花了我好长的时间长解决

由于我使用的是小米手机,当用真机测试的时候,出现了一个很奇怪的错误,这锅得小米来背


FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to establish session

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这里写图片描述

最终终于找到了原因,在开发者选项中,划到最下面,关闭MIUI优化这个选项,然后重启,问题就解决了,使用小米手机的一定要注意 
这里写图片描述

后记:安装的过程中虽然遇到了问题,但也让我学习到了很多,大家如果有什么问题可以留言进行交流,我将为大家解答

本文转载自:https://blog.csdn.net/zhangatle/article/details/53289471

共有 人打赏支持
j
粉丝 27
博文 444
码字总数 22005
作品 0
广州
React Native Mac环境搭建

这里只介绍Mac 上的环境搭建,其他环境搭建请参考: http://facebook.github.io/react-native/docs/getting-started.html 。 上面有所有环境搭建。 1、安装Homebrew 安装Homebrew是为安装Nod...

totogo2010
2016/06/03
0
0
已有Android工程 集成React Native 的那些事

2017年2月27日,天气晴,我永远记得这天,我心潮澎湃,因为终于把优谈TOP 集成了React Native,从去年开始,公司陆陆续续的集成和学习React Native,通过demo的形式,写了不少组件和API,也能...

quanke
2017/02/28
0
0
React Native植入原生Android应用的流程解析

引言 React Native是现在移动开发新的可选方案,也带来了原属于Web领域的React的优秀开发特性。另一方面,React Native的技术栈一经掌握,可以用于iOS、Android及Windows(见此)多个平台,即...

freecsdn
2016/09/12
35
0
React Native在Windows下的安装及环境配置(Android)

接下来给大家讲一下在Windows环境下安装React Native的环境,React Native是Facebook推出的开源项目框架,类似原生的APP的运行和响应速度,JS和HTML的混合,性能还算不错。详细的大家就百度或...

jay100500
2017/08/09
0
0
Android原生APP中添加ReactNative 进行混合开发教程

Android原生APP中添加ReactNative 进行混合开发教程 背景 React Native出来已经一段时间了,相对来说也算稳定了,在很多的企业中都实际使用他们,混合开发已经是未来的一种趋势,混合开发中使...

那不是尤迪安
2016/10/25
439
1

没有更多内容

加载失败,请刷新页面

加载更多

腾讯投资最高1.75亿美元正式进军菲律宾移动支付市场

菲律宾长途电话公司(PLDT)公司今日宣布,中国互联网巨头腾讯和私募股权公司KKR将获得该公司旗下金融科技公司Voyager Innovations的少数股权。 PLDT在一份声明中称:“腾讯和KKR最多将分别收...

linuxCool
21分钟前
2
0
正则介绍及grep/egrep用法

10月16日任务 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 扩展 把一个目录下,过滤所有*.php文档中含有eval的行 grep -r --include="*.php" 'eval' /data 正则介绍 正则就是一串有规律的字符...

hhpuppy
32分钟前
1
0
J2Cache 中使用 Lettuce 替代 Jedis 管理 Redis 连接

一直以来 J2Cache 都是使用 Jedis 连接 Redis 服务的。Jedis 是一个很老牌的 Redis 的 Java 开发包,使用很稳定,作者维护很勤勉,社区上能搜到的文章也非常非常多。算是使用范围最广的 Redi...

红薯
今天
12
0
一个可能的NEO链上安全随机数解决方案

0x00 困境 链上安全随机数生成应该算是一个比较蛋疼的问题,哪怕你的系统再牛逼,合约程序困在小小的虚拟机里,哪怕天大的本事也施展不开。 更悲催的是,交易执行的时候,是在每一个节点都执...

暖冰
今天
1
0
【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部