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

2022-10-24 20:14:49

移动开发以前一般都是原生的语言来开发，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>

    );

  }

}

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

可以看修改后的效果了。

关注我

以你最方便的方式关注我：

微信公众号：

码农公寓