为何 Expo 能成为 Android + iOS + Web 开发顶流？

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

什么是 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