来认识一下React Native 和 Expo
最近正在学习React Native,打算在个人网站上连载一些学习文章,目的一个是做笔记,一个是分享学习进度。本笔记总结自东哥-长乐未央的React Native教程。
React Native用来开发跨端的app,语法和写法基本 React 相同,我想也不用多说什么了,接下来是正文。
本文目录 (8)↓
创建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 打开调试工具,会调出浏览器里的调试窗口。连接了多个机器或模拟器的话,会让你选调出哪个机器的调试窗口。
想看更多快捷键?
命令行中按 ? 就会显示所有的快捷键组合了。
这篇文章就到这里,接下来学到什么新东西会继续写,如果你偶然刷到了我的网站和文章,感谢你的浏览