跳到主要内容

安装

React Native Skia 将 Skia 图形库 带到 React Native。Skia 是 Google Chrome 和 Chrome OS、Android、Flutter、Mozilla Firefox、Firefox OS 以及许多其他产品的图形引擎。

版本兼容性：需要 react-native@>=0.71 和 react@>=18。
此外，您应确保您的设备至少为 iOS 13 和 Android API level 21 或更高版本。
要将 React Native Skia 与新架构一起使用，需要 react-native@>=0.72。
要将 React Native Skia 与视频支持一起使用，需要 Android API level 26 或更高版本。

还支持 tvOS >= 13。

Skia 有一个名为 Graphite 的新的实验性后端，它在 Vulkan 和 Metal 上运行。我们目前正在开发使用此新后端的 React Native Skia 的新版本。为了使 Graphite 运行，您需要使用 Android API level 26 和 iOS 15.1 或更高版本。

使用 yarn 安装库

sh
yarn add @shopify/react-native-skia
sh
yarn add @shopify/react-native-skia

或使用 npm

sh
npm install @shopify/react-native-skia
sh
npm install @shopify/react-native-skia

包大小​

以下是将 React Native Skia 添加到您的项目时预计的应用程序大小增加值（了解更多）。

iOSAndroidWeb
6 MB4 MB2.9 MB

iOS​

在 ios/ 目录中运行 pod install。

Android​

目前，您需要安装 Android NDK。如果您已安装 Android Studio，请确保 $ANDROID_NDK 可用。例如，ANDROID_NDK=/Users/username/Library/Android/sdk/ndk/<version>。

如果未安装 NDK，您可以通过 Android Studio 的菜单 File > Project Structure 进行安装

然后是 SDK Location 部分。它将显示 NDK 路径，或者在您未安装 NDK 时提供下载选项。

Proguard​

如果您正在使用 Proguard，请确保在 proguard-rules.pro 中添加以下规则

-keep class com.shopify.reactnative.skia.** { *; }
-keep class com.shopify.reactnative.skia.** { *; }

故障排除​

对于错误 在 SDK、PATH 或 cmake.dir 属性中未找到 CMake 'X.X.X'。

打开 Tools > SDK Manager，切换到 SDK Tools 选项卡。找到 CMake 并单击 Show Package Details 并下载兼容版本 'X.X.X'，然后应用进行安装。

Web​

要在浏览器中使用此库，请参阅这些说明。

TV​

从版本 1.9.0 开始，React Native Skia 支持使用 React Native TVOS 在电视设备上运行。目前支持 Android TV 和 Apple TV。

信息

并非所有功能都经过测试，因此在使用 React Native Skia 在电视设备上运行时，请报告您遇到的任何问题。

Playground​

我们有一个您可以试用的示例项目这里。

sh
yarn bootstrap
cd example && yarn start
sh
yarn bootstrap
cd example && yarn start

要在 iOS 上运行示例项目，您需要运行 pod install，在 Android 上，您还需要安装 Android NDK（请参阅此处）。

调试​

我们建议使用 React Native DevTools 调试您的 JS 代码 - 请参阅 React Native 文档。或者，您可以在 VS Code 和通过本机 IDE 调试 JS 和平台代码。如果使用 VS Code，我们推荐 Expo Tools、Radon IDE 或 Microsoft 的 React Native Tools。

使用 Jest 进行测试​

React Native Skia 测试模拟使用依赖于加载 CanvasKit 的 Web 实现。

第一步是确保您的 Skia 文件没有被 jest 转换，例如，我们可以将其添加到 transformIgnorePatterns 指令中

js
"transformIgnorePatterns": [
  "node_modules/(?!(react-native|react-native.*|@react-native.*|@?react-navigation.*|@shopify/react-native-skia)/)"
]
js
"transformIgnorePatterns": [
  "node_modules/(?!(react-native|react-native.*|@react-native.*|@?react-navigation.*|@shopify/react-native-skia)/)"
]

接下来，我们建议使用 ESM。要启用 ESM 支持，您需要将 jest 命令更新为 node --experimental-vm-modules node_modules/.bin/jest。但我们也支持 CommonJS。

ESM 设置​

要加载 CanvasKit 并随后加载 React Native Skia 模拟，请将以下设置文件添加到您的 Jest 配置中

js
// notice the extension: .mjs
"setupFiles": ["@shopify/react-native-skia/jestSetup.mjs"]
js
// notice the extension: .mjs
"setupFiles": ["@shopify/react-native-skia/jestSetup.mjs"]

CommonJS 设置​

我们还提供一个没有 ECMAScript 模块支持的设置文件版本。要使用此版本，请将以下设置文件添加到您的 Jest 配置中

js
// notice the extension: .js
"setupFiles": ["@shopify/react-native-skia/jestSetup.js"]
js
// notice the extension: .js
"setupFiles": ["@shopify/react-native-skia/jestSetup.js"]

通过此设置，您需要在测试中加载 Skia 环境。在测试文件的顶部包含以下内容

js
/**
 * @jest-environment @shopify/react-native-skia/jestEnv.mjs
 */
js
/**
 * @jest-environment @shopify/react-native-skia/jestEnv.mjs
 */

例如

js
/**
 * @jest-environment @shopify/react-native-skia/jestEnv.mjs
 */
import "react-native";
import React from "react";
import { cleanup, render } from "@testing-library/react-native";
import App from "./App";
it("renders correctly", () => {
  render(<App />);
});
afterEach(cleanup);
js
/**
 * @jest-environment @shopify/react-native-skia/jestEnv.mjs
 */
import "react-native";
import React from "react";
import { cleanup, render } from "@testing-library/react-native";
import App from "./App";
it("renders correctly", () => {
  render(<App />);
});
afterEach(cleanup);

通过此配置，您将使用 ECMAScript 模块或 CommonJS 正确设置 Jest 以使用 React Native Skia 模拟。