【亲测免费】 React Native SVG 使用教程

1、项目介绍

react-native-svg 是一个用于在 React Native 和 React Native Web 项目中渲染 SVG 图形的库。它由 Software Mansion 维护，支持大多数 SVG 元素和属性，使得开发者可以轻松地将 SVG 代码转换为 React Native 组件。该库在 GitHub 上有超过 7.4k 的星标，被广泛应用于各种 React Native 项目中。

2、项目快速启动

安装

使用 Expo

如果你使用 Expo，可以直接安装 react-native-svg：

npx expo install react-native-svg

使用 React Native CLI

如果你使用 React Native CLI，可以通过 npm 或 yarn 安装：

npm install react-native-svg

或者

yarn add react-native-svg

然后，链接原生代码：

cd ios && pod install

基本使用

以下是一个简单的示例，展示如何在 React Native 项目中使用 react-native-svg 渲染一个 SVG 矩形：

import React from 'react';
import { Svg, Rect } from 'react-native-svg';

const App = () => {
  return (
    <Svg height="100%" width="100%" style={{ backgroundColor: '#33AAFF' }}>
      <Rect x="50" y="50" width="50" height="50" fill="#3399ff" strokeWidth="3" stroke="rgb(0, 0, 0)" />
    </Svg>
  );
};

export default App;

3、应用案例和最佳实践

应用案例

react-native-svg 可以用于创建复杂的图形界面，例如图表、地图、动画等。以下是一个使用 react-native-svg 创建简单图表的示例：

import React from 'react';
import { Svg, Line, Polyline } from 'react-native-svg';

const Chart = () => {
  return (
    <Svg height="200" width="200">
      <Line x1="0" y1="0" x2="200" y2="200" stroke="black" strokeWidth="2" />
      <Polyline points="0,200 50,150 100,100 150,50 200,0" fill="none" stroke="red" strokeWidth="2" />
    </Svg>
  );
};

export default Chart;

最佳实践

1. 性能优化：避免在每次渲染时重新创建 SVG 元素，尽量使用状态管理工具（如 useMemo）来缓存 SVG 元素。
2. 动画：结合 Animated API 使用 react-native-svg 可以创建流畅的 SVG 动画。
3. 跨平台兼容：确保你的 SVG 代码在 React Native 和 React Native Web 中都能正常工作。

4、典型生态项目

1. react-native-svg-charts

react-native-svg-charts 是一个基于 react-native-svg 的图表库，提供了多种图表类型（如折线图、柱状图、饼图等），适合需要快速创建图表的应用。

2. react-native-svg-transformer

react-native-svg-transformer 允许你在 React Native 项目中直接导入 SVG 文件，并将其转换为 React 组件，简化了 SVG 的使用流程。

3. react-native-svg-uri

react-native-svg-uri 是一个用于在 React Native 中渲染 SVG URI 的库，适合需要动态加载 SVG 资源的应用。

通过以上模块的介绍，你应该能够快速上手并使用 react-native-svg 在你的 React Native 项目中渲染 SVG 图形。