react-native-svg的使用-逐码极客

React Native 中使用图标的三种方式对比以及 svg 的引用

三种方案

1、图片 使用png图片，应该是移动端最普适的方案，对RN来说，使用图片解决图标最简单，也最复杂，简单的是RN自己就能够解析图片，因此不用引入任何外部库，复杂的就是为了iOS和安卓的各种屏幕，我们可能要对每个图片准备各种尺寸。 2、IconFont 使用开源库 react-native-vector-icons。这种方案解决简单，只用引进这个库和 .ttf 文件，就能像 web端 一样使用字体图标。 3、svgReact Native 默认不支持 svg，需要引入 react-native-svg 才能渲染 svg 图标。svg 对比图片拥有体积小，而且因其可缩放特性，不需要担心用户屏幕的尺寸。

方案对比

类型	优势	劣势
图片(打包)	使用方便。`<Image source={require(file)}`	需要根据屏幕不同准备多种尺寸。`bundle` 后体积增大，特别是需要热更新时。
图片(URI)	更换方便，远程管理。`<Image source={uri: file}`	同上，缓存管理比较麻烦，需要另外的库。
IconFont	随app打包，文件小，使用便利，不用担心屏幕屏幕尺寸	不能热更新；需要引入额外的库
svg(打包)	文件极小，可随bundle热更新，可缩放图形，不用担心屏幕尺寸问题	需要引入额外的库
svg(URI)	基本同图片，不用担心屏幕尺寸	缓存

svg实施方案

步骤1：下载svg文件
步骤2：安装 react-native-svg 和 react-native-svg-transformer 到项目中
步骤3：在根目录下新增 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"]
    }
  };
})();

步骤4：在根目录下的 app.json 文件中添加下面的内容

{
  "name": "com.qianfeng.user",
  "displayName": "com.qianfeng.user",
+  "expo": {
+    "packagerOpts": {
+      "config": "metro.config.js"
+    }
+  }
}

步骤5：项目中使用

import IconWechat from './images/svg/wechat.svg';

<IconWechat width='40' height='40'/>