文档章节

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

j
 james_laughing
发布于 09/19 14:48
字数 1598
阅读 4
收藏 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
博文 448
码字总数 22078
作品 0
广州
私信 提问
React Native植入原生Android应用的流程解析

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

freecsdn
2016/09/12
35
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在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

没有更多内容

加载失败,请刷新页面

加载更多

大数据学习有哪几个步骤

目前大数据行业异常火爆,不少人都对大数据充满了兴趣,其中有大部分人都从没接触过大数据,对于应该如何学习大数据一头雾水。大数据学习并不是高深莫测的,虽然它并没有多简单,但是通过努力...

董黎明
22分钟前
4
0
shell习题_3

1:监控httpd的进程;每隔10s检测一次服务器的httpd的进程数,如果大于500则自动重启httpd服务;并检测是否启动成功; 如果没有正常启动还需要再启动一次,最大不成功数超过五次立即发邮件给管理...

芬野de博客
22分钟前
3
0
Android 9.0 优势探讨

我们来谈论一下 Android。尽管 Android 只是一款内核经过修改的 Linux,但经过多年的发展,Android 开发者们(或许包括正在阅读这篇文章的你)已经为这个平台的演变做出了很多值得称道的贡献...

问题终结者
39分钟前
4
0
vue 组件使用中的一些细节点

细节一 基础例子 运行结果: 以上大家都懂,这边就不多说,回到代码里,有时候我们需要 tbody 里面每一行是一个子组件,那我们代码可以怎么写呢?我们可以这样写,定义一个全局组件,如下: ...

peakedness丶
46分钟前
2
0
vue 之 css module的使用方法

动手之前先配置项目,网上很多文章说需要下载css-loader插件,Vue中的vue-loader已经集成了 CSS Modules,因此删掉也能正常运行 在vue.config.js中添加如下配置 `css: {``loaderOptions: ...

前端小攻略
50分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部