大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

什么是 Expo

An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.

Expo 是一个开源框架，用于使用 React 开发通用本机应用程序，Expo 可在 Android、iOS 和 Web 上运行。Expo 包含一个通用运行时和库，可让开发者通过编写 React 和 JavaScript 来构建原生应用。

Expo 存储库包含 Expo SDK、模块 API、Go 应用、CLI、路由器、文档和各种其他支持工具。Expo 应用服务 (EAS) 是一个托管服务平台，与 Expo 开源工具深度集成。EAS 可帮助开发者以个人或团队身份构建、发布和迭代应用。

Expo 存储库有以下核心部分组成：

apps/expo-go ： Expo Go 的源代码。apps/expo-go/ios/Exponent.xcworkspace ：是 Xcode 工作区，开发 iOS 时总是打开它而不是 Exponent.xcodeproj，因为工作区还会加载 CocoaPods 依赖项。docs： https://docs.expo.dev 的源代码templates ：运行 npx create-expo-app 时获得的模板项目react-native-lab ：用于构建 Expo Go 的 react-native 分支guides 高级主题、tools 包含构建和配置工具。

目前 Expo 在 Github 通过 MIT 协议开源，有超过 31k 的 star、4k 的 fork、940k 的项目依赖量、代码贡献者 1000+、妥妥的前端顶级开源项目。

如何使用 Expo

Expo SDK 以软件包的形式提供对设备和系统功能（如联系人、相机、陀螺仪、GPS 位置等）的访问。开发者可以使用 npx expo install 命令安装任何 Expo SDK 软件包。例如，使用以下命令安装三个不同的软件包：

npx expo install expo-camera expo-contacts expo-sensors// 安装依赖

安装一个或多个包后，可以将其导入 JavaScript 代码中：

import {CameraView} from 'expo-camera';import * as Contacts from 'expo-contacts';import {Gyroscope} from 'expo-sensors';// 在js中导入相关依赖

此时可以使用 Contacts.getContactsAsync() 从设备读取联系人、读取陀螺仪传感器以检测设备移动，或启动手机的相机并拍照。

因为 Expo 应用是 React Native 应用，因此所有 Expo SDK 包都可以在安装和配置了 expo 包的任何 React Native 应用中使用。创建支持 Expo SDK 包的 React Native 应用的最简单方法是使用 create-expo-app。但是，开发者也可以使用 npx install-expo-modules 命令将 Expo SDK 支持添加到现有的 React Native 应用中。

npx create-expo-app my-app --template bare-minimumnpm install expo@canary && npx expo install --fix// 通过相关脚手架实例化

Expo 提供了非常丰富的库用于与 native 层交互，包括：Image、Battery、Camera、Audio、AsyncStorage、Brightness、Contacts、Device、Notifications 等等。比如 下面的 expo-video 旨在用更现代、更可靠的实现替换 expo-av 中的视频组件：

import {useVideoPlayer, VideoView} from 'expo-video';import {useEffect, useRef, useState} from 'react';import {PixelRatio, StyleSheet, View, Button} from 'react-native';const videoSource = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';// 视频地址export default function VideoScreen() { const ref = useRef(null); const [isPlaying, setIsPlaying] = useState(true); const player = useVideoPlayer(videoSource, player => { player.loop = true; player.play(); }); useEffect(() => { const subscription = player.addListener('playingChange', isPlaying => { setIsPlaying(isPlaying); }); return () => { subscription.remove(); }; }, [player]); return ( <View style={styles.contentContainer}> <VideoView ref={ref} style={styles.video} player={player} allowsFullscreen allowsPictureInPicture /> <View style={styles.controlsContainer}> <Button title={isPlaying ? 'Pause' : 'Play'} onPress={() => { if (isPlaying) { player.pause(); } else { player.play(); } setIsPlaying(!isPlaying); }} /> </View> </View> );}const styles = StyleSheet.create({ contentContainer: { flex: 1, padding: 10, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 50, }, video: { width: 350, height: 275, }, controlsContainer: { padding: 10, },});

更多关于 Expo 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/expo/expo

https://docs.expo.dev/versions/latest/sdk/battery/

https://www.youtube.com/watch?app=desktop&v=zdr6Q1t7Hr8

https://nascentdigital.com/thoughts/reasons-we-love-using-expo-with-react-native