大家好，很高興又見面了，我是"進階前端進階"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發！
什麼是 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-minimum
npm 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