React Native应用中如何使用SVG？

React Native 应用中应用 SVG（可缩放矢量图形）可显著提高应用程序视觉效果的质量。SVG 具备分辨率独立性，无损缩放能力，使其成为图标、标志和插图的理想选择。本文将探索 React Native 中 SVG 的使用方法，并提供示例代码和有用资源的参考。

为什么使用 SVG?

• 可缩放性：SVG 是基于矢量的,意味着可以缩放到任何大小而不会失真。
• 性能:与使用多个不同分辨率的栅格图像相比,SVG 的性能可能更好。
• 样式:SVG 可以使用 CSS 或 JavaScript 进行样式设置,提供更大的灵活性。
• 文件大小：与高分辨率栅格图像相比,SVG 的文件大小通常更小。

入门

要在 React Native 中使用 SVG，我们将使用 react-native-svg 库。该库为 React Native 提供 SVG 支持，允许您将 SVG 文件作为 React 组件使用。

安装

首先，安装 react-native-svg 库：

npm install react-native-svg

如果使用 Expo，该库已经包含在内。如果不是，可能需要我们手动链接库：

npx react-native link react-native-svg

接下来，安装 react-native-svg-transformer 以支持直接导入 SVG 文件：

npm install --save-dev react-native-svg-transformer

配置

对于 React Native CLI 用户,配置 Metro 以使用 SVG 转换器。在项目根目录创建或更新 metro.config.js 文件：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer')
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg']
    }
  };
})();

对于 Expo 用户，将转换器添加到 app.json：

{
  "expo": {
    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": ["js", "jsx", "ts", "tsx", "svg"]
    }
  }
}

在项目中使用 SVG

1. 创建 SVG 文件：将 SVG 文件保存在 assets 文件夹(或任何其他目录)中。
2. 导入 SVG：通过将 SVG 作为 React 组件导入,在组件中使用它。

以下是一个示例

assets/icon.svg

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>

App.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Icon from './assets/icon.svg'; // 导入 SVG

export default function App() {
  return (
    <View style={styles.container}>
      <Icon width={100} height={100} /> {/* 将 SVG 作为组件使用 */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

样式设置 SVG

可以使用 style 属性或直接传递属性来设置 SVG 的样式：

<Icon width={100} height={100} fill="red" style={{ margin: 10 }} />

高级用法

还可以通过使用 props 和 state 动态操作 SVG：

import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import Icon from './assets/icon.svg';

export default function App() {
  const [color, setColor] = useState('blue');

  const changeColor = () => {
    setColor(color === 'blue' ? 'green' : 'blue');
  };

  return (
    <View style={styles.container}>
      <Icon width={100} height={100} fill={color} />
      <Button title="Change Color" onPress={changeColor} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

结语

通过在 React Native 中使用 SVG，可以显著提升应用程序的视觉效果和性能。利用 react-native-svg 库，您可以轻松地集成和操作 SVG，从而为项目带来更多可能性。按照上述步骤，我们可以开始探索在 React Native 应用程序中利用 SVG 所能实现的潜力。