文档章节

React Native开发 - 搭建React Native开发环境

o
 osc_gu9d45li
发布于 2019/04/08 13:23
字数 1140
阅读 40
收藏 0

精选30+云产品,助力企业轻松上云!>>>

移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift。那么对于开发一个App,至少需要两套代码、两个团队。对于公司来说,成本还是有的。然而现在有蛮多的公司开发App是基于React Native来开发的,这样可以做到一个App,就是一套代码,一个团队。对于公司来说,无疑节约了成本。

《React Native开发》这系列的文章主要是记录本人利用React Native学习开发的笔记,这一篇文章是第一篇《搭建React Native开发环境》。

1、安装NodeJs

由于React Native中有一些工具,例如react-native-cli,是要npm来安装,所以先得安装NodeJs。对于NodeJs的版本要求是必须高于8.3。

打开NodeJs的官网下载页面:https://nodejs.org/en/download/

直接下载最新版本,可以下载绿色解压版本,也可以下载安装版本,我本人喜欢绿色版本,同时系统是64位的,如图:

解压好后,将NodeJs的所在目录配置到环境变量path中。

然后通过cmd命令设置npm镜像,即:

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --globa

2、安装Python2

注意Python的版本必须是2.x系列的,Python的官网下载地址为:https://www.python.org/downloads/

也是直接下载2.x系列的最新版本,即:

下载下来的一个安装文件,直接一步一步安装即可,安装好后,设置环境变量即可。

3、安装 JDK

React Native要求JDK的版本为1.8,官网的下载地址为:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

选择本系统合适的版本,即可,本人是Windows x64版本,即:

下载下来的一个安装文件,直接一步一步安装即可,安装好后,设置环境变量即可。

4、安装React-Native-Cli

React-Native-Cli工具是要通npm来安装,即在cmd窗口中输入如下命令:

npm install -g react-native-cli

5、安装Android环境

安装Android环境,首先先安装Android Studio,下载地址为:http://www.android-studio.org/index.php/download

大家可以选择最新版本,即:

下载下来的是一个可安装程序,点击安装即可,在点击“Next”过程,有一步需要指定Android SDK的路径,如果之前电脑中已经存在SDK,可以指定该路径,后续就可以不用下载SDK;由于本地没有安装过SDK的场景,这里暂时可以指定一个后续将保存SDK的路径。

点击“Finish”后,开始自动下载SDK,此时根据网速的快慢,决定这个步骤的时间的长短,下载完成后,则会进行Android Studio的欢迎画面,如图:

6、配置ANDROID_HOME环境变量

在安装Android Studio时,设置了SDK的安装目录,该目录就是ANDROID_HOME环境变量配置的目录,配置好该环境变量后,需要将该目录下的platform-tools目录加入到path环境变量中,即:

%ANDROID_HOME%\platform-tools

7、创建项目

在cmd命令中执行如下如下命令,创建一个JGYW的项目,即:

react-native init JGYW

**注意:**在哪个目录下执行该命令,就会在该目录创建项目。

创建好项目后,就会在当前目录下创建一个JGYW的目录,然后进入该目录,再执行:

react-native run-android

第一次执行该命令一般会下载很多的依赖文件可能比较长的时间.

如果出现如下错误:

说明SDK中缺少相应的版本,可以通过Android Studio来安装相应的版本就行。

如果出现如下错误:

说明找不着运行设备,此时你可以启动模拟器,你也可以将真机通过USB插入电脑中,同时根据不同的手机,将手机设置成开发者模式。

如果在真机上测试,打开程序后,会报错误,则需要在电脑中cmd命令行中执行如下命令:

adb reverse tcp:8081 tcp:8081

同时修改一下,App.js文件中如下内容,添加上“架构与我”字样,即:

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!架构与我</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

然后在真机就可以看到如图效果:

可以看修改后的效果了。

关注我

以你最方便的方式关注我: 微信公众号:

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
React Native

React Native https://www.jianshu.com/p/919bcf4dfb60 iOS 搭建 React Native 开发环境-HelloWord 项目创建 https://www.jianshu.com/p/97692b1c451d 从Android到React Native开发(一、入门......

iOS_愛OS
2018/10/17
0
0
新版React Native+Redux打造高质量上线App

新版React Native+Redux打造高质量上线App 本课程将带你解锁React Native开发应用新姿势,一网打尽React Native新版本热门技术;课程中老师会手把手带你开发并打包上线一款完整的跨平台App;...

学海无涯任我行
2019/06/25
20
0
(一)react-native开发系列之Mac开发环境配置

写在前面 在开始之前,先说下选择react-native的背景原因 最近一年来,公司为了节省开发成本,以及降低维护成本,指派我开始做起前端开发app的工作,我和公司的小伙伴们就开始了漫长的app开发...

osc_tf30cc36
2018/09/10
4
0
初次尝试使用typescript开发react-native

typescript是javascript的超集,在javascript的基础上添加了可选的静态类型,非常适合团队开,这次我们尝试使用typescript来开发react-native应用 搭建react-native开发环境 安装yarn和react...

力谱宿云
2017/02/16
2K
0
RN学习第一篇:MAC配置RN环境

我们在使用之前我们最基本的就是环境的搭建,不能搭建环境,一切白搭,这篇文章我就简单的介绍一下环境搭建过程,并且运行第一个项目 React Native搭建开发环境.png 文章目录 1、React Nativ...

辉哥de简书
2017/12/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如果你失明了,你怎么编程? - How can you program if you're blind?

问题: Sight is one of the senses most programmers take for granted. 视觉是大多数程序员认为理所当然的感官之一。 Most programmers would spend hours looking at a computer monitor......

技术盛宴
8分钟前
4
0
如何删除使用Python的easy_install安装的软件包? - How do I remove packages installed with Python's easy_install?

问题: Python's easy_install makes installing new packages extremely convenient. Python的easy_install使安装新包非常方便。 However, as far as I can tell, it doesn't implement th......

fyin1314
38分钟前
8
0
如何将逗号分隔的字符串转换为数组? - How to convert a comma separated string to an array?

问题: I have a comma separated string that I want to convert into an array, so I can loop through it. 我有一个逗号分隔的字符串,我想将其转换成数组,因此可以循环遍历它。 Is the...

富含淀粉
今天
13
0
深源恒际:担心个人身份被冒用?不存在!

本文作者:c****t 近日,苟晶被冒名顶替身份参加高考的事件在社会各界掀起广泛热议。事件调查结果公布后,舆论风向逆转,吃瓜群众认为当事人夸大其词消费了公众情绪,一边对当事人所遭遇的不...

百度开发者中心
昨天
5
0
CKEditor 5 + SpringBoot实战(三):SpringData JPA数据持久化

在本系列的文章中,我将介绍如何在Spring Boot Application中使用CKEditor编辑器。介绍的内容包括基本环境的搭建,文件上传,SpringData JPA数据持久化,CKEditor5的安装,CKEditor图片上传,...

树下魅狐
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部