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

前置要求

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属性的对象

环境搭建

搭建RN编译环境一共有两种方式:ExpoReact 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能够占用更小的内存。详细可见:www.copycat.dev/blog/yarn-v…
  • 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

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

React Native CLI

不同平台搭建流程略有不同,下面以Window-Android为例,更多平台搭建可参考:reactnative.dev/docs/enviro…

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

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

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

  1. 使用npx调用react-native库初始化项目
npx react-native@latest init AwesomeProject

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

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

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

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

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

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

如果你想知道一个现有的原生项目,如何添加RN内容进去,你可以参考:reactnative.dev/docs/integr…

启动RN

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

//yarn
yarn android
//npm
npm run android

//或者

//yarn
yarn start
//npm
npm run start

可是我们打开yarn或者npm支持的所有指令集会发现
【React Native入门教程】环境搭建
也就是说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"
  },
  //...以下省略
}

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

真机调试

React Native启动以后会在电脑上占用一个端口,默认情况是8081端口
【React Native入门教程】环境搭建
由node启动的一个服务,为什么要讲这个呢?是因为调试与这个端口有关,真机调试一共有两种方式:WIFI、USB

WIFI调试

我们在APP中的RN页面晃动手机,此时会弹出RN的设置页面:com.facebook.react.devsupport.DevSettingsActivity
【React Native入门教程】环境搭建
选择:Settings -> Debug serve host & port for device并设置你电脑的ip和RN启动的端口即可。
注: 电脑和手机需要在同一个局域网
想要检查是否连接成功,可以在RN命令行输入’d’手机会打开RN设置页,这样就算连接成功。
【React Native入门教程】环境搭建

USB调试

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

adb reverse tcp:8081 tcp:8081

这条命令的作用是:映射电脑上的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

原文链接:https://juejin.cn/post/7346763303430225929 作者:Tiger_Hu

(0)
上一篇 2024年3月16日 下午4:15
下一篇 2024年3月16日 下午4:26

相关推荐

发表回复

登录后才能评论