React Native 与 Expo SDK 入门指南

Expo 是一个开源平台，它使开发跨平台的 iOS 和 Android 移动应用程序变得更容易。Expo SDK 是一系列针对每个平台的原生库，允许 JavaScript 访问设备的系统功能，如摄像头、推送通知、本地存储、联系人以及其他硬件和操作系统 API。

先决条件

要安装 Expo，需要 Node.js 12 或更高版本，因为 Expo 的命令行工具和依赖管理依赖于 Node 平台。可以通过运行 node -v 命令检查 Node 版本。Expo 提供了 Expo CLI 命令行界面，用于在 iOS 或 Android 上开发应用时进行测试。安装 Expo CLI 使用以下命令：

npm install -g expo-cli

为了测试移动应用的功能，需要为 Android 和 iOS 设备安装 Expo 客户端应用，这些应用可以在 Google Play 商店和 App Store 中找到。

构建一个 Expo 应用程序

让我们通过创建一个新应用来了解 Expo 的工作方式。使用以下命令初始化一个新项目：

expo init your_app_name

将 your_app_name 替换为你的应用名称。执行命令后，会提示选择模板类型，例如“空白工作流”以简化设置。接下来，可以选择通过 Yarn 安装模板；如果已安装 Yarn，选择是，否则继续。完成这些步骤后，应用就准备就绪了。进入项目目录并启动开发服务器：

cd <app_name>
npm start 或 yarn start

成功执行后，将启动一个新的开发地铁环境，并显示二维码。可以通过 Android 的 Expo 客户端应用或 iPhone 的默认相机应用扫描二维码来运行应用。

在 Expo 和 React Native 中设置项目

项目由几个重要文件组成：App.json 包含所有应用配置，如应用名称、SDK 版本、图标等；package.json 列出应用依赖；App.js 是应用启动时运行的入口文件。在 App.js 中，render 方法将组件包裹在单个视图中，样式可以通过 styles 对象定义，将其从 render 方法中移出可增强代码可读性。示例代码如下：

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default class Main extends React.Component {
  render() {
    return (
      <View style={styles.title}>
        <Text style={styles.title_txt}>My First App</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  title: {
    // 样式定义
  },
  title_txt: {
    // 样式定义
  }
});

什么是 Expo SDK？

Expo 内置了许多常用库，这些库在大多数应用中都会用到。以下是一些关键库的概述：

• AppAuth 和 AuthSession：通过 OAuth 对用户进行认证。
• SplashScreen：在应用启动时制作闪屏。
• localization：管理应用的本地化（l10n/i18n）。
• AppLoading：加载资源、字体等。
• MapView：在应用中使用地图功能。
• ImagePicker 和 ImageManipulator：从设备选择和处理图像或视频。
• Sharing：在应用和设备之间共享数据。
• SecureStore：在设备存储器上安全保存数据。
• Camera：使用设备摄像头拍摄照片和视频。

此外，Expo 还支持推送通知、广告集成（如 AdMob 和 Facebook Ads）、分支链接、分析工具（如 Amplitude），以及其他功能如音频播放、视频处理、绘图、亮度管理、后台任务和支付集成。总的来说，Expo 提供了约 80 个 API，安装后即可访问，无需关闭 metro bundler，从而加快开发进度。

使用 Expo 创建一个闪屏

让我们通过添加闪屏来学习 Expo 的工作流程。首先，准备一个 PNG 格式的图片作为闪屏，并将其放在项目目录中。然后，安装 expo-splash-screen 库：

expo install expo-splash-screen

接下来，创建一个新文件并导入库，编写一个函数来显示闪屏：

import React, { useCallback, useEffect, useState } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';
import splashScreenImage from './splashScreenImage.png';

export default function SplashScreenComponent() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        await SplashScreen.preventAutoHideAsync();
        await new Promise(resolve => setTimeout(resolve, 1000));
      } catch (e) {
        console.warn(e);
      } finally {
        setLoaded(true);
      }
    }
    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (loaded) {
      await SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Image
        source={splashScreenImage}
        style={{ width: 100, height: 100, borderRadius: 10 }}
        resizeMode="cover"
      />
    </View>
  );
}

最后，在 App.js 中导入并调用这个组件：

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import SplashScreenComponent from './SplashScreenComponent';

export default class Main extends React.Component {
  render() {
    return (
      <>
        <SplashScreenComponent/>
        <View style={styles.title}>
          <Text style={styles.title_txt}>My First App</Text>
        </View>
      </>
    );
  }
}

启动应用后，即可在 Expo 客户端应用中看到结果。

发布并将应用程序上传到商店

当需要将应用发布到商店时，可以使用以下命令构建应用：

expo build:[ios|android]

这个命令会在云端构建包，无需高性能本地设备，Windows 用户也可以使用。构建过程中，可以从终端退出，并通过提供的 URL 监控构建状态。构建完成后，可以通过下载按钮获取软件包。上传到商店使用以下命令：

expo upload:[ios|android]

这样，应用就准备就绪了。

2021 年 Expo 的新功能

2021 年，Expo 增加了多项新功能，提升了开发体验：

• 集成的开发者工具：通过 CLI 访问开发者菜单，检查组件并跟踪结果。运行 expo start 后，按 m 打开开发者菜单，shift+m 打开性能监视器或元素检查器。
• 强制重载：在终端 UI 中按 r 可以重新加载所有连接的设备、模拟器和浏览器，兼容 iOS、Android 和 Web。
• TypeScript 的自动设置：只需生成一个空的 tsconfig.json 文件并执行 Expo 启动命令，Expo 会自动处理 TypeScript 配置，简化了安装过程。
• 明显改善的错误处理：在 SDK 41 中，错误信息更具描述性和实用性，只显示最重要的堆栈痕迹，并精确指出错误和警告。
• 调试配置：使用 expo config --type public 命令可以查看 app.config.js 或 app.json 的评估结果，方便调试。
• 改进的苹果商店互动：Expo CLI 提供快速连接，简化支付方式更改或合同签署流程，直接从控制台解决问题。

总的来说，Expo 现在速度更快，提供智能认证、改进的错误管理，并增强了动态问题的洞察力。

Expo 的局限性

尽管功能强大，Expo 也有一些局限性需要注意：

1. 不支持后台代码执行，这意味着应用关闭时无法执行如监听位置变化的代码。
2. 受限于 Expo SDK 支持的本地 API，如果应用需要独特用例，可能需要使用基本的 React Native 代码或 ExpoKit 库来开发。
3. 绑定在 Expo 工具集上，不能直接使用其他 React Native 开发工具，但从 Expo 弹出应用是可行的，因为 Expo SDK 兼容基本 React Native 应用。
4. 独立二进制文件的构建需要在线进行，Expo 命令行工具在 Expo 服务器上启动构建过程，完成后通过 URL 下载 .apk 或 .ipa 文件。

尽管有这些限制，Expo 仍然很有价值，因为它覆盖了应用程序通常所需的大部分功能，无需在平台外寻找执行本地功能的方法。

总结

React Native 是开发原生移动应用程序的流行框架，而 Expo 通过其 SDK 和开发者工具进一步简化了这个过程。本文介绍了如何开始使用 Expo 创建、测试和发布应用，并讨论了其优势和局限性。Expo SDK 提供了丰富的库集合，几乎涵盖了移动应用中所需的所有功能，是 React Native 开发者的有力工具。