探索React Native Skia：高性能的2D图形库

import React, { PureComponent } from 'react';
import { View } from 'react-native';
import { Skia } from '@shopify/react-native-skia';
 
class SkiaComponent extends PureComponent {
  render() {
    // 创建一个2D图形上下文
    const surface = Skia.Surface.Make(200, 200);
    // 获取图形上下文并绘制一个红色矩形
    const canvas = surface.getCanvas();
    const paint = Skia.Paint().setColor(Skia.Color('#ff0000'));
    canvas.drawRect(Skia.Rect(0, 0, 200, 200), paint);
 
    // 将绘制完成的图形转换为React Native可渲染的图片
    const image = surface.makeImage();
 
    // 返回一个View组件，其中包含绘制的图形
    return (
      <View style={{ width: 200, height: 200 }}>
        <Skia.Image image={image} />
      </View>
    );
  }
}
 
export default SkiaComponent;

这段代码演示了如何在React Native中使用@shopify/react-native-skia库创建一个简单的2D图形组件。首先，它创建了一个200x200像素的Skia.Surface，然后在其上绘制了一个红色的矩形，并将其转换为可在React Native中渲染的图片。最后，返回一个View组件，其中包含了绘制的图形。这个例子简单明了地展示了如何使用Skia进行2D图形绘制。