React Native SVG 使用教程

项目介绍

React Native SVG 是一个用于 React Native 和 React Web 项目的 SVG 库。它允许你在移动应用和网页中渲染 SVG 图形，提供了丰富的 SVG 元素和功能，如 <Circle>, <Rect>, <Path> 等。这个库由 Software Mansion 维护，是一个广泛使用的开源项目。

项目快速启动

安装

首先，你需要安装 react-native-svg 库：

npm install react-native-svg

基本使用

以下是一个简单的示例，展示如何在 React Native 项目中使用 SVG：

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

const App = () => (
  <Svg width="100" height="100">
    <Circle cx="50" cy="50" r="40" stroke="black" strokeWidth="2" fill="red" />
  </Svg>
);

export default App;

应用案例和最佳实践

加载远程 SVG 文件

你可以使用 <SvgUri> 组件加载远程 SVG 文件：

import React from 'react';
import { SvgUri } from 'react-native-svg';

const App = () => (
  <SvgUri
    width="100%"
    height="100%"
    uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
  />
);

export default App;

处理触摸事件

你可以为 SVG 元素添加触摸事件：

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

const App = () => (
  <Svg width="100" height="100">
    <Circle
      cx="50"
      cy="50"
      r="40"
      fill="red"
      onPress={() => alert('Press on Circle')}
    />
  </Svg>
);

export default App;

典型生态项目

React Native Web

React Native SVG 也支持 React Native Web，这意味着你可以在网页项目中使用相同的 SVG 组件。这对于跨平台开发非常有用。

其他相关库

• react-native-svg-transformer: 允许你在 React Native 项目中使用 SVG 文件作为组件。
• react-native-svg-charts: 提供了一系列基于 SVG 的图表组件，如折线图、柱状图等。

通过这些库，你可以扩展 React Native SVG 的功能，实现更复杂的图形和图表。