如何在React Native Skia的Canvas或Box中使用Expo Vector Icon？

安全阿岳

2026-8-22

在React Native Skia的Canvas/Box中使用Ionicons图标

React Native Skia的Canvas组件不支持直接嵌套普通React Native组件（比如<Ionicons>），但可以通过两种方式实现需求，分场景说明：

场景1：在Skia Canvas中绘制图标

Canvas只能识别Skia原生的绘图API，所以需要将Ionicons图标转换为SVG路径数据，再用Skia的Path和Fill组件绘制：

获取图标SVG路径：从Ionicons官网（对应md-checkmark-circle的页面）提取SVG的path标签中的d属性值，示例路径如下：
```
M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z
```

在Canvas中绘制：

import { Canvas, Path, Fill } from "@shopify/react-native-skia";

export default function SkiaCheckmark() {
  // 替换为你获取的正确路径
  const checkmarkPath = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z";

  return (
    <Canvas style={{ width: 32, height: 32 }}>
      <Path path={checkmarkPath}>
        <Fill color="green" />
      </Path>
    </Canvas>
  );
}

如果需要动态调整大小，可以通过Skia的Transform组件或路径缩放实现，比如：

<Path path={checkmarkPath} transform="scale(0.8)" />

场景2：在Skia Box中使用图标

Skia的Box组件是布局容器，和React Native的View类似，支持直接嵌套普通RN组件，所以可以直接把<Ionicons>放进Box里：

import { Box } from "@shopify/react-native-skia";
import Ionicons from "@expo/vector-icons/Ionicons";

export default function CheckmarkInBox() {
  return (
    <Box style={{ borderRadius: 8, padding: 4, backgroundColor: "#f5f5f5" }}>
      <Ionicons name="md-checkmark-circle" size={32} color="green" />
    </Box>
  );
}