8.7K ·GitHub
这是什么？
React Native Skia 把 Google 的 Skia 图形引擎（Chrome 和 Android 所用的渲染器）带到 React Native，让你可以用 React 组件 API 编写高性能的 2D 图形、着色器和动画。
React Native Skia 把 Google 的 Skia 图形引擎（Chrome 和 Android 所用的渲染器）带到 React Native，让你可以用 React 组件 API 编写高性能的 2D 图形、着色器和动画。它是 UI 库还是底层图形引擎？它是一个把 Skia 的绘图原语（路径、着色器、图像、文本）暴露为声明式 React 组件的库，因此你通过组合组件来构建图形，而不是直接调用命令式的 canvas API。
它是一个把 Skia 的绘图原语（路径、着色器、图像、文本）暴露为声明式 React 组件的库，因此你通过组合组件来构建图形，而不是直接调用命令式的 canvas API。怎么把它加进项目？用你的包管理器把它安装到现有的 React Native 项目中（例如 yarn add @shopify/react-native-skia），然后从该包导入 Canvas、Path、Skia 等组件即可开始绘图。
用你的包管理器把它安装到现有的 React Native 项目中（例如 yarn add @shopify/react-native-skia），然后从该包导入 Canvas、Path、Skia 等组件即可开始绘图。它兼容 Expo 和新架构（New Architecture）吗？它同时支持 Expo（托管和裸工作流）与普通 React Native 项目，并兼容新架构（Fabric/TurboModules）。
它同时支持 Expo（托管和裸工作流）与普通 React Native 项目，并兼容新架构（Fabric/TurboModules）。它在网页端表现一样吗？Web 支持是通过 CanvasKit/WASM 提供的，而非原生 Skia，因此在 Web 上的行为和性能可能与 iOS/Android 原生实现有所不同。
Web 支持是通过 CanvasKit/WASM 提供的，而非原生 Skia，因此在 Web 上的行为和性能可能与 iOS/Android 原生实现有所不同。它能运行在哪些平台上？它以 iOS 和 Android 作为原生 React Native 平台，并通过 WebAssembly 提供实验性的 Web 支持。
它以 iOS 和 Android 作为原生 React Native 平台，并通过 WebAssembly 提供实验性的 Web 支持。它开箱即用能绘制哪些图形？它支持路径、形状、图像、文本、渐变、着色器（SKSL）、混合模式、滤镜和复杂动画，全部由 Reanimated 风格的共享值驱动，可实现流畅的 60fps 以上的更新。
它支持路径、形状、图像、文本、渐变、着色器（SKSL）、混合模式、滤镜和复杂动画，全部由 Reanimated 风格的共享值驱动，可实现流畅的 60fps 以上的更新。为什么用它而不是 react-native 内置的 View 或 SVG？Skia 提供直接的 GPU 加速渲染，其绘图 API（自定义着色器、复杂路径、滤镜、模糊效果）远比标准 RN View 或 react-native-svg 丰富，能缩小与原生图形性能之间的差距。
Skia 提供直接的 GPU 加速渲染，其绘图 API（自定义着色器、复杂路径、滤镜、模糊效果）远比标准 RN View 或 react-native-svg 丰富，能缩小与原生图形性能之间的差距。我能用 Reanimated 制作图形动画吗？可以，这个库在设计上与 react-native-reanimated 紧密集成，让你可以用共享值和 worklet 驱动 Skia 绘图，实现原生的流畅动画。
可以，这个库在设计上与 react-native-reanimated 紧密集成，让你可以用共享值和 worklet 驱动 Skia 绘图，实现原生的流畅动画。What are similar projects?react-native-skia, lottie-web, fabric.js, lottie-react-native, flutter_scene, pixijs, WebGL-Fluid-Simulation, react-canvas
react-native-skia, lottie-web, fabric.js, lottie-react-native, flutter_scene, pixijs, WebGL-Fluid-Simulation, react-canvasWhich topics is it in?skia, shaders, canvas, react-native, rendering, gpu-acceleration, svg, graphics, wasm, image-processing, animation, mobile
skia, shaders, canvas, react-native, rendering, gpu-acceleration, svg, graphics, wasm, image-processing, animation, mobile