React Native的SVG圖標(biāo)使用

在React Native中使用SVG圖標(biāo)與在Web開發(fā)中使用SVG非常相似。你可以通過一些庫來加載和顯示SVG圖標(biāo)，其中最流行的是react-native-svg。

以下是如何在React Native項(xiàng)目中使用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圖標(biāo)： 在你的React Native組件中，你可以像這樣使用SVG圖標(biāo)：

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;

在上面的示例中，我們導(dǎo)入了Svg組件以及一些基本的SVG元素（如Circle和Path），并在MyComponent組件中使用它們來渲染一個(gè)簡單的圖標(biāo)。

注意：react-native-svg庫支持許多SVG特性，包括漸變、濾鏡和動畫。你可以查閱官方文檔以獲取更多詳細(xì)信息和示例。