创建React Native项目有什么方法?

创建 RN 项目有两种方法,第一种是使用 React Native 官方的原来的老方法建项目,也就是不使用其他框架去做项目。这样的话有很明显的缺点就是:环境配置难,构建打包有环境限制。

环境配置很啰唆,而且你在 Windows 上写的代码不能直接编译成苹果的安装包,必须使用苹果设备以及 Xcode 才可以编译,对设备有要求。

而第二种方法就简单很多了,也是 RN 官方推荐的,就是使用 Expo 框架。Expo 框架集成了路由,并提供了更多组件,开始一个新项目的话,使用 Expo 框架是更好的选择。

来认识一下 Expo 吧。

使用 Expo 建项目

你要准备什么?

一台电脑,用来开发。一台手机,用来预览和调试,最好是苹果的。当然了,你有一个安卓设备一个苹果设备是最好的,这样两个平台都可以真机调试了。没有也没关系,RN官网上提供了安卓模拟器的安装教程,就是对网络环境有要求,请务必保证你的代理稳定,否则就要一遍又一遍的重装,做好心理准备。

那为什么 RN 官网只给了安卓模拟器的安装教程呢?因为苹果模拟器只能是 Mac 上安装 Xcode 才可以配置,没有 Mac 的可以略过了。

如果有其他方式能模拟苹果设备的话,那是我没见识了

安装 Expo Go

苹果在国区的 App Store 就能下载到。

安卓在 Google Play 可以下载到,国内网络环境的话,可以在APKPure搜索安装,里面有安装教程。

创建 Expo 项目

首先要确认你的电脑有 Node.js 环境,然后在终端命令行中输入:

npx create-expo-app@latest

这样会创建一个 SDK 57 的项目,按信息提示的安装所需的包,给项目起名,等待创建完成。

如果你觉得刚才那种方式创建的项目,里面内置了很多东西,看了很懵,你可以用空模板创建项目,Expo 官方支持在创建项目的时候添加模板参数。

npx create-expo-app@latest --template blank
如果你想创建最新的 SDK 58 标准项目,用下面的命令
npx create-expo-app@latest --template default@sdk-58

创建完成后,进入项目文件夹,然后启动项目。

npx expo start
或
npm start

启动后显示一个二维码,几个网址,和一些快捷键提示(有的可能没有),这就启动成功了。

如何预览项目

首先保证你的电脑和预览设备在同一网络下。

在预览设备上打开 Expo Go,同一网络下的话,应用上会直接提供项目的入口,点就行了。没有的话,安卓版的 Expo Go 可以直接扫二维码进入,苹果要用手机自带的相机扫码,在相机界面点击“在 Expo Go 打开”。或者你也可以在浏览器输入命令行里给的网址,也可以预览。

如果是安装了模拟器,按 i 打开苹果模拟器,按 a 打开安卓模拟器。如果你还安装了很多模拟器,可以用shift + i 或 shift + a 切换苹果或安卓模拟器。

打开调试工具

在命令行中按 j 打开调试工具,会调出浏览器里的调试窗口。连接了多个机器或模拟器的话,会让你选调出哪个机器的调试窗口。

想看更多快捷键?

命令行中按 ? 就会显示所有的快捷键组合了。


这篇文章就到这里,接下来学到什么新东西会继续写,如果你偶然刷到了我的网站和文章,感谢你的浏览