8.7K ·GitHub
Что это?
React Native Skia приносит графический движок Google Skia (рендерер, используемый Chrome и Android) в React Native, позволяя писать высокопроизводительную 2D-графику, шейдеры и анимации через API React-компонентов.
React Native Skia приносит графический движок Google Skia (рендерер, используемый Chrome и Android) в React Native, позволяя писать высокопроизводительную 2D-графику, шейдеры и анимации через API React-компонентов.Это UI-библиотека или низкоуровневый графический движок?Это библиотека, открывающая примитивы рисования Skia (пути, шейдеры, изображения, текст) как декларативные React-компоненты, так что графика строится композицией компонентов, а не прямыми императивными вызовами canvas API.
Это библиотека, открывающая примитивы рисования Skia (пути, шейдеры, изображения, текст) как декларативные React-компоненты, так что графика строится композицией компонентов, а не прямыми императивными вызовами canvas API.Как добавить его в проект?Установите его через свой пакетный менеджер (например, yarn add @shopify/react-native-skia) в существующий React Native-проект, затем импортируйте из пакета компоненты вроде Canvas, Path и Skia и начинайте рисовать.
Установите его через свой пакетный менеджер (например, yarn add @shopify/react-native-skia) в существующий React Native-проект, затем импортируйте из пакета компоненты вроде Canvas, Path и Skia и начинайте рисовать.Работает ли он с Expo и New Architecture?Он поддерживает и Expo (managed и bare), и обычные React Native-проекты, а также совместим с New Architecture (Fabric/TurboModules).
Он поддерживает и Expo (managed и bare), и обычные React Native-проекты, а также совместим с New Architecture (Fabric/TurboModules).Работает ли он в вебе так же?Поддержка веба реализована через CanvasKit/WASM, а не нативный Skia, поэтому поведение и производительность в вебе могут отличаться от нативных реализаций iOS/Android.
Поддержка веба реализована через CanvasKit/WASM, а не нативный Skia, поэтому поведение и производительность в вебе могут отличаться от нативных реализаций iOS/Android.На каких платформах он работает?Он нацелен на iOS и Android как нативные платформы React Native, с экспериментальной поддержкой веба через WebAssembly.
Он нацелен на iOS и Android как нативные платформы React Native, с экспериментальной поддержкой веба через WebAssembly.Какую графику он умеет рисовать из коробки?Он поддерживает пути, фигуры, изображения, текст, градиенты, шейдеры (SKSL), режимы наложения, фильтры и сложные анимации — всё управляется shared values в стиле Reanimated для плавных обновлений на 60 fps и выше.
Он поддерживает пути, фигуры, изображения, текст, градиенты, шейдеры (SKSL), режимы наложения, фильтры и сложные анимации — всё управляется shared values в стиле Reanimated для плавных обновлений на 60 fps и выше.Зачем это вместо встроенных View в react-native или SVG?Skia даёт прямой рендеринг с ускорением на GPU и куда более богатый API рисования (кастомные шейдеры, сложные пути, фильтры, эффекты размытия), чем могут предложить стандартные RN-вью или react-native-svg, сокращая разрыв с производительностью нативной графики.
Skia даёт прямой рендеринг с ускорением на GPU и куда более богатый API рисования (кастомные шейдеры, сложные пути, фильтры, эффекты размытия), чем могут предложить стандартные RN-вью или react-native-svg, сокращая разрыв с производительностью нативной графики.Можно ли анимировать графику с Reanimated?Да, библиотека задумана для тесной интеграции с react-native-reanimated: рисунками Skia можно управлять через shared values и worklets, получая плавные анимации на нативном потоке.
Да, библиотека задумана для тесной интеграции с react-native-reanimated: рисунками Skia можно управлять через shared values и worklets, получая плавные анимации на нативном потоке.What are similar projects?react-native-skia, lottie-web, fabric.js, flutter_scene, lottie-react-native, pixijs, WebGL-Fluid-Simulation, react-canvas
react-native-skia, lottie-web, fabric.js, flutter_scene, lottie-react-native, 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