React Native的SVG图标使用

在React Native中使用SVG图标与在Web开发中使用SVG非常相似。你可以通过一些库来加载和显示SVG图标，其中最流行的是react-native-svg。

以下是如何在React Native项目中使用react-native-svg库的一些基本步骤：

1. 安装库： 使用npm或yarn安装react-native-svg库。

npm install react-native-svg

或

yarn add react-native-svg

2. 链接库（对于React Native < 0.60）： 如果你正在使用React Native 0.59或更早版本，你可能需要手动链接库。你可以使用react-native link命令来完成这一步。

react-native link react-native-svg

对于React Native 0.60及更高版本，链接是自动完成的，无需额外步骤。 3. 使用SVG图标： 在你的React Native组件中，你可以像这样使用SVG图标：

import React from 'react';
import {View} from 'react-native';
import Svg, {Circle, Path} from 'react-native-svg';

const MyComponent = () => {
  return (
    <View>
      <Svg height="50" width="50">
        <Circle cx="25" cy="25" r="20" stroke="green" strokeWidth="4" fill="yellow" />
        <Path
          d="M 10 10 H 90 V 90 H 10 L 10 10 Z"
          stroke="red"
          strokeWidth="2"
          fill="none"
        />
      </Svg>
    </View>
  );
};

export default MyComponent;

在上面的示例中，我们导入了Svg组件以及一些基本的SVG元素（如Circle和Path），并在MyComponent组件中使用它们来渲染一个简单的图标。

注意：react-native-svg库支持许多SVG特性，包括渐变、滤镜和动画。你可以查阅官方文档以获取更多详细信息和示例。