【React Native入门教程】环境搭建_reactnative菜鸟教程

前置要求

React Native 使用XML格式描述一个UI，使用 JavaScript进行逻辑开发，这种语法叫做：JSX

• .jsx：表示一个JavaScript文件，并且使用了JSX语法
• .tsx：表示一个TypeScript文件，并且使用了JSX语法

这两者与.js\.tx并没有什么区别，只是告诉编译器使用了那种语法

解析时：遇到<>则当HTML进行解析，遇到{}则当JavaScript处理，例如下面的例子：

<View
  style={{
    flex: 1,
    alignItems: 'center',
  }}>
  <Text> Hello </Text>
</View>
// Q: 这里为什么是两个双引号？
// A: 最外层的{}代表这是一段JS代码。第二层则是JS语法中代表一个有flex、alignItems属性的对象
1
2
3
4
5
6
7
8
9

环境搭建

搭建RN编译环境一共有两种方式：Expo 与 React Native CLI

• Expo：这是一套与React Native构建相关的工具和服务，可以让你很快速的从0构建一个纯RN项目。
• React Native CLI：这是一个Node.js的插件，是React Native自带的一个脚手架工具，可以方便的构建RN项目

node.js、npm、yarn、npx

在继续往下讲两种搭建环境方式之前，先介绍一下以后会用到的一些名词含义及区别。

• node.js：是一个开源、跨平台的JavaScript运行时环境，类似于JAVA虚拟机
• npm：当我们下载node.js时，npm便会跟随一起被安装，它是JavaScript平台的包管理器，通过它可以很方便的管理项目中依赖的第三方库
• yarn：同样也是JavaScript平台的包管理器，他和npm的功能一模一样，不同之处在于下载时yarn支持并行下载，速度比npm快。当然还有一些细节的差异，例如yarn能够占用更小的内存。详细可见：https://www.copycat.dev/blog/yarn-vs-npm/
• npx：如果你的npm版本在5.2.0以上，那么npx也会跟随被安装。它是一个npm内的程序包，它可以让你在不下载的情况下运行任何在npm平台注册的第三方库

Expo

一个纯RN项目是比较少的，所以这里简单叙述一下即可，当然Expo搭建一个RN项目也是非常简单。

// npx
npx create-expo-app AwesomeProject

cd AwesomeProject
npx expo start

// yarn
yarn create expo-app AwesomeProject

cd AwesomeProject
yarn expo start
1
2
3
4
5
6
7
8
9
10
11

你可以选择用npx或者yarn任意一种工具进行RN项目的快速创建。

React Native CLI

不同平台搭建流程略有不同，下面以Window-Android为例，更多平台搭建可参考：https://reactnative.dev/docs/environment-setup?guide=native&package-manager=yarn

由于纯的RN项目可以用Expo快速搭建，以下讨论的为RN和原生混合开发情况。

1. 准备好一个原生Android项目，并能正常打包APK

这一步的目的是确保你能配置好最基本的Android开发相关环境

2. 使用npx调用react-native库初始化项目

npx react-native@latest init AwesomeProject
1

上面有解释道，npx可以不下载就使用npm上的库，这里就使用react-native的最新版本，初始化一个名为AwesomeProject的项目

注： 如果你已经用npm提前下载了react-native这个库，那你可以用以下命令卸载它，避免意外的错误

npm uninstall -g react-native-cli @react-native-community/cli
1

如果你想指定react native库的版本，你可以使用以下指令

npx react-native@X.XX.X init AwesomeProject --version X.XX.X
1

到这里项目环境已经搭建好了，下一步让我来看如何将其安装至手机上。

如果你想知道一个现有的原生项目，如何添加RN内容进去，你可以参考：https://reactnative.dev/docs/integration-with-existing-apps?language=kotlin

启动RN

在很多教程上都会有以下的命令教你如何启动RN

//yarn
yarn android
//npm
npm run android

//或者

//yarn
yarn start
//npm
npm run start
1
2
3
4
5
6
7
8
9
10
11

可是我们打开yarn或者npm支持的所有指令集会发现

也就是说yarn和npm并不支持start和android 参数的，但是为什么又可以启动react native？

原来： 当yarn或者npm后面的参数并不支持时，会去当前项目下 package.json 文件下寻找 scripts 标签，并找到对应的参数填入。哪有人又要问了，如果package.json 也没有找到又会怎么办，最后一道工序就是去yarn已经下载好了的第三方库匹配了。

打开package.json如下：

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  //...以下省略
}
1
2
3
4
5
6
7
8
9
10
11
12
13

这个时候我们再来看启动脚本：
yarn start 就等于 yarn react-native start，虽然react-native也不是yarn本来就支持的参数，但是这是第三方的库，最后会调用react-native这个库支持的start命令。
同理，yarn android 等于 yarn react-native run-android

真机调试

React Native启动以后会在电脑上占用一个端口，默认情况是8081端口

由node启动的一个服务，为什么要讲这个呢？是因为调试与这个端口有关，真机调试一共有两种方式：WIFI、USB

WIFI调试

我们在APP中的RN页面晃动手机，此时会弹出RN的设置页面：com.facebook.react.devsupport.DevSettingsActivity

选择：Settings -> Debug serve host & port for device并设置你电脑的ip和RN启动的端口即可。
注： 电脑和手机需要在同一个局域网
想要检查是否连接成功，可以在RN命令行输入’d’手机会打开RN设置页，这样就算连接成功。

USB调试

与WIFI调试类似，首先需要连接USB并能够通过adb devices 查找到设备，然后需要输入一条命令

adb reverse tcp:8081 tcp:8081
1

这条命令的作用是：映射电脑上的8081端口到手机上的8081端口。

首先电脑上的8081端口是由RN服务使用，将其映射到手机的8081端口后，手机就可以直接通过localhost:8081访问到RN服务了。所以不要忘记如WIFI调试一样，在Settings -> Debug serve host & port for device设置IP端口为：localhost:8081

修改RN服务端口

默认情况使用8081端口，当然是可以修改，通过参数：--port=进行设置，如下例子：

yarn react-native start --port=8090
1