如何在React Native中使用SVG

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

在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 文档
• Expo 文档
• React Native SVG Transformer

结论

在React Native中使用SVG可以显著改善应用程序的视觉效果和性能。使用react-native-svg库,您可以轻松地在项目中集成和操作SVG。按照上述步骤开始,探索SVG在React Native应用程序中提供的可能性。

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。