1. React-native-vector-icons

https://oblador.github.io/react-native-vector-icons/
👉貌似这个库的功能还挺强的，可以自定义生成图标iconSets：https://www.jianshu.com/p/c900f6a0797f
react-native-vector-icons 使用

  1. 引入iconfont

看上去挺麻烦的

  1. svg✔

可以渲染 svg ，也可以渲染图标和图像

👉https://blog.csdn.net/weixin_42341232/article/details/108900967

Svg封装使用

1、安装依赖

react-native-svg 为你在Android和iOS平台上的React Native项目提供SVG支持。
react-native-svg-transformer 使你能够在React Native项目中导入本地SVG文件

  1. yarn add react-native-svg
  3. yarn add react-native-svg-transformer --dev

2、修改metro.config.js

  1. const { getDefaultConfig } = require('metro-config');
  3. module.exports = (async () => {
  4.   const {
  5.     resolver: { sourceExts, assetExts },
  6.   } = await getDefaultConfig();
  7.   return {
  8.     transformer: {
  9.       babelTransformerPath: require.resolve('react-native-svg-transformer'),
  10.     },
  11.     resolver: {
  12.       assetExts: assetExts.filter(ext => ext !== 'svg'),
  13.       sourceExts: [...sourceExts, 'svg'],
  14.     },
  15.   };
  16. })();

3、下载svg图标 iconfont

下载svg文件，存储到项目中 src\assets\svgs
image.png

4、封装处理svg源文件的工具函数 getSvg.js

在当前目录执行 node ./getSvg.js 命令
截取svg源文件，最终生成 svgs.js 文件，以key: value 的形式导出，配合下一步封装的Svg公共组件，在页面中就可以直接使用svg名字加载图标了😍

  1. //导入node的文件模块
  2. var fs = require('fs');
  3. var path = require('path');
  4. //定义想要处理的svg文件夹路径
  5. const svgDir = path.resolve(__dirname, './svgs');
  6. console.log('svgDir=', svgDir);
  8. // 读取单个文件
  9. function readfile(filename) {
  10.   return new Promise((resolve, reject) => {
  11.     fs.readFile(path.join(svgDir, filename), 'utf8', function (err, data) {
  12.       console.log(data.replace(/<\?xml.*?\?>|<\!--.*?-->|<!DOCTYPE.*?>/g, ''));
  13.       if (err) {
  14.         reject(err);
  15.       }
  16.       resolve({
  17.         [filename.slice(0, filename.lastIndexOf('.'))]: data,
  18.       });
  19.     });
  20.   });
  21. }
  23. // 读取SVG文件夹下所有svg
  24. function readSvgs() {
  25.   return new Promise((resolve, reject) => {
  26.     fs.readdir(svgDir, function (err, files) {
  27.       if (err) {
  28.         reject(err);
  29.       }
  30.       Promise.all(files.map(filename => readfile(filename)))
  31.         .then(data => resolve(data))
  32.         .catch(err => reject(err));
  33.     });
  34.   });
  35. }
  37. // 在当前的目录下生成svgs.js
  38. readSvgs()
  39.   .then(data => {
  40.     let svgFile =
  41.       'export default ' + JSON.stringify(Object.assign.apply(this, data));
  42.     fs.writeFile(path.resolve(__dirname, './svgs.js'), svgFile, function (err) {
  43.       if (err) {
  44.         throw new Error(err);
  45.       }
  46.     });
  47.   })
  48.   .catch(err => {
  49.     throw new Error(err);
  50.   });

image.png

5、封装Svg.js组件

  1. import React, {Component} from 'react';
  2. import {SvgXml} from 'react-native-svg';
  3. import svgs from '../assets/svgs.js';
  5. // const xml = `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1655121069194" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4898" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M0 778.112L620.672 485.12 0 192l164.288 293.12z" fill="#1F7BFF" fill-opacity=".1" p-id="4899"></path><path d="M341.312 778.112l620.672-293.056L341.312 192 505.6 485.12z" fill="#1F7BFF" p-id="4900"></path></svg>`;
  7. export default class Svg extends Component {
  8.   render() {
  9.     const {color, size, style, icon} = this.props;
  10.     console.log(color);
  12.     const svgXmlData = svgs[icon];
  13.     // console.log('svgXmlData=', svgXmlData);
  15.     if (!svgXmlData) {
  16.       const err_msg = `没有"${icon}"这个svg文件`;
  17.       throw new Error(err_msg);
  18.     }
  19.     return (
  20.       <SvgXml
  21.         width={size}
  22.         height={size}
  23.         xml={svgXmlData}
  24.         fill={color}
  25.         style={style}
  26.       />
  27.     );
  28.   }
  29. }

6、页面组件中使用

  1. import Svg from '~/components/Svg';
  3. <Svg icon="male" size={px2dp(45)} style={styles.iconHuman} />
  4. <Svg icon="female" size={px2dp(45)} style={styles.iconHuman} />

image.png

可能会遇到的问题

如果启动失败，尝试下面的操作

  1. rm -rf node_modules yarn.lock
  2. yarn
  3. react-native start --reset-cache