将 Rive 添加到 Expo

要在 Expo 中使用 Rive，您需要安装 Rive React Native 包。

由于此包包含自定义本地代码，因此它与 Expo Go 不兼容。您需要使用开发构建（development build），它使您能够完全访问本地模块。

开发构建是推荐用于生产应用的设置。

本指南将引导您完成将 Rive 集成到 Expo 项目中的步骤，包括安装依赖项、配置构建和测试您的图形。

初始设置

如果您还没有项目，创建一个新的 Expo 应用：

npx create-expo-app MyRiveApp

安装 Expo 开发客户端：

npx expo install expo-dev-client

然后安装 Rive 包：

新版运行时（推荐）

npx expo install @rive-app/react-native

旧版运行时

npx expo install rive-react-native

Android - Expo SDK 53

如果使用 Expo SDK 53 构建失败？Expo SDK 53 在 Android 上可能由于依赖版本冲突而构建失败。Rive Android SDK 需要 compileSdkVersion 36 和 Android Gradle Plugin 8.9.1+，但 Expo SDK 53 默认使用较低版本。

要解决此问题，安装 expo-build-properties 和 expo-custom-agp：

npx expo install expo-build-properties expo-custom-agp

然后更新您的 app.json 或 app.config.js：

{
  "expo": {
    "plugins": [
      ["expo-custom-agp", "8.9.2"],
      [
        "expo-build-properties",
        {
          "android": {
            "compileSdkVersion": 36
          }
        }
      ]
    ]
  }
}

更新后，运行 npx expo prebuild --clean 并重新构建您的应用。

iOS 最低版本

新版运行时（推荐）

新版运行时要求 iOS 15.1 或更高版本。

如果您使用 Expo SDK 52 或更高版本，它已经要求 15.1 或更高版本。

如果您使用较旧的 SDK，则需要手动或通过配置更新 iOS 部署目标。

选项 1：使用 expo-build-properties（推荐）

持续本地代码生成 (CNG) 通过使用 Prebuild 自动生成您的 iOS 和 Android 本地项目，简化了应用维护和配置。

如果您使用 CNG，可以直接在 app.json 或 app.config.js 中设置最低 iOS 部署目标：

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "deploymentTarget": "15.1"
          }
        }
      ]
    ]
  }
}

选项 2：手动配置

如果您不使用 Prebuild，直接在 ios/Podfile 中更新目标：

platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'

旧版运行时

旧版运行时要求 iOS 14.0 或更高版本。

如果您使用 Expo SDK 52 或更高版本，可以跳过此步骤，因为它有更高的默认值。

如果您使用较旧的 SDK，则需要手动或通过配置更新 iOS 部署目标。

选项 1：使用 expo-build-properties（推荐）

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "deploymentTarget": "14.0"
          }
        }
      ]
    ]
  }
}

选项 2：手动配置

platform :ios, podfile_properties['ios.deploymentTarget'] || '14.0'

创建开发构建

要使用 Rive 运行时运行您的应用，您需要创建开发构建。

由于有多种方法可以实现此目标，请参阅 Expo 开发构建指南选择最适合您需求的方法。

运行您的应用

创建开发构建并将其安装到设备或模拟器后，使用以下命令启动应用：

npx expo start

您可以使用以下组件来测试 Rive：

新版运行时（推荐）

import { View, ActivityIndicator, Text } from "react-native";
import { RiveView, useRiveFile, Fit } from "@rive-app/react-native";

export default function RiveDemo() {
  const { riveFile, isLoading, error } = useRiveFile(
    "https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv"
  );

  if (isLoading) {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  if (error || !riveFile) {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Error loading Rive file: {error || "Unknown error"}</Text>
      </View>
    );
  }

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <RiveView
        file={riveFile}
        artboardName="Avatar 1"
        stateMachineName="avatar"
        fit={Fit.Contain}
        style={{ width: 400, height: 400 }}
        autoPlay={true}
      />
    </View>
  );
}

如果在加载 Rive 文件时遇到错误，请确保您在开发构建中运行，而不是 Expo Go。

旧版运行时

import { View } from "react-native";
import Rive from "rive-react-native";

export default function RiveDemo() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Rive
        url="https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv"
        artboardName="Avatar 1"
        stateMachineName="avatar"
        style={{ width: 400, height: 400 }}
      />
    </View>
  );
}

如果遇到此错误：Invariant Violation: requireNativeComponent: "RiveReactNativeView" was not found in the UIManager，这通常意味着应用正在 Expo Go 中运行。在终端中按 s 并选择开发构建。

添加本地资源

上面的示例从远程 URL 加载 .riv 文件。 要使用本地 .riv 文件，必须将它们打包到本地构建中。 参见加载 Rive 文件了解使用本地资源的说明。