React Native超简单完整示例－tabs、页面导航、热更新、用户行为分析

初学React Native，如果没有人指引，会发现好多东西无从下手，但当有人指引后，会发现其实很简单。这也是本人写这篇博客的主要原因，希望能帮到初学者。

本文不会介绍如何搭建开发环境，如果你还没有搭建，可参考这里的官方文档：https://react-native.org/doc/getting-started.html 。

本文也不会介绍各种组件，太多了，可参考这里的官方文档：https://react-native.org/doc/components-and-apis.html　。

本文将会从创建项目开始，到基本的常见布局(tabs)、多页面之间的导航，加入热更新、用户行为分析功能。总之，我希望告诉你在实际工作中一个React Native App是如何开发出来的。

每一个知识点不会展开来详细讲解，这篇博客只是起到一个指引的作用，能让你少走一点弯路，少一些自己摸索的时间。

第一步：创建项目

当然，前提是你已经搭建好了开发环境。

在命令行中，进入你想要放项目文件的地方，我放在D盘的mydocs文件夹下(D:\mydocs\)，执行以下命令：

react-native init 项目名

我的项目名是“test0”，所以完整的命令应该是这样的：

react-native init test0

由于需要到外网下载文件，而我朝对网络是有管制的，因此这个命令可能需要执行较长时间。只要网络没有中断，没有报错，就耐心等待吧。

待命令执行完毕后，在 D:\mydocs\ 目录下就多了一个 test0 文件夹。里面有很多已经默认创建好的文件和文件夹。

先来对默认创建的项目文件做个简单的认识。

用你喜欢的任意编辑器(我喜欢用VS Code)找开这个文件夹。你将看到一个类似这样的目录结构：

其中，

/package.json　是包管理的配置文件，要安装什么包，可在这里配置，项目的基本信息，比如项目名、版本号、项目说明、等等，也可在此配置。但大多数情况下，可以不用管它。

/index.js　项目的启动文件。

/App.js　首页文件，在/index.js中会加载这个文件。

/node_modules　项目中用到的所有包都存放在这个文件夹中。自己的项目文件不要放在这里。

/android　这里放的是与Android原生编译相关的一些文件，作为一名React Native开发者，一般情况下也不用去管它。

/ios　这里放的是与iOS原生编译相关的一些文件，作为一名React Native开发者，一般情况下也不用去管它。

这里需说明一下，如果你的项目的开发中，需要大量去动 /android 和 /ios 下的代码，甚至在里面加入很多业务逻辑，那就说明你的项目开发是存在问题的，一般情况下，只有在某些与编译、配置、发布相关的才会动到这里的代码。

第二步：创建我们的第一个页面－Hello React Native

其实，现在我们已经可以运行项目了。 react-native init test0 这个命令已经默认为我们创建了一个首页，但我想替换为我自己的内容。

修改  /App.js ，有以下的代码替换掉原来的所有代码：

 1 import React from 'react';
 2 import { SafeAreaView, View, Text } from 'react-native';
 3 
 4 class App extends React.Component {
 5     render() {
 6         return (
 7             <SafeAreaView>
 8                 <View>
 9                     <Text>Hello React Native</Text>
10                 </View>
11             </SafeAreaView>
12         );
13     }
14 };
15 
16 export default App;

默认生成的代码是hooks语法，但我不喜欢，我更喜欢用class。我觉得class的结构更清晰一些。

第三步：在模拟器中查看运行效果

我们的第一个页面已经创建好了，现在需要查看一下运行效果。可用真机调试，但大多数情况下，用模拟器会更方便一些。

有各种模拟器可供选择，我喜欢用Android Studio自带的模拟器。安装方法同样见这个文档：https://react-native.org/doc/getting-started.html　。

打开Android Studio，点击 Configure -> AVD Manager

在打开的窗口中，就能看到所有你已经创建过的模拟器了。如果你还没有创建过模拟器，就点击 Create Virtual Device 创建一个。下面是我已经创建好的模拟器。

点击后面的绿色三角形，就能启动模拟器了，启动后是这个样子的：