如何替换react-native-toast-message中error类型toast的leadingIcon

问题原因 #

你当前的代码存在两个核心问题导致图标无法显示：

1. React Native 中项目内的静态资源不能通过uri传相对路径的方式引用，必须使用require()语法引入
2. React Native 原生Image组件不支持渲染SVG格式资源，而BaseToast默认会把传入的source类图标用Image组件加载

解决方法 #

前置配置（使用SVG图标必须配置）

你需要先安装SVG解析依赖让项目支持直接引入SVG作为组件：

# 安装依赖
npm install react-native-svg react-native-svg-transformer --save

修改项目根目录的metro.config.js配置：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

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

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

配置完成后重启Metro服务生效。

调整toast配置

leadingIcon属性支持直接传入React组件，你可以直接把引入的SVG组件传入即可：

// 替换为你的SVG文件实际相对路径
import ErrIcon from '../assets/tick.svg';

export const toastConfig = {
  error: ({ text1, props, ...rest }) => (
    <BaseToast
      {...rest}
      // 可自定义SVG的大小、颜色等样式
      leadingIcon={<ErrIcon width={22} height={22} fill="#ff3b30" />}
      contentContainerStyle={{ paddingHorizontal: 15 }}
      text1Style={{
        fontSize: 15,
        fontWeight: '400'
      }}
      text1={text1}
    />
  )
};

如果你不想配置SVG依赖，也可以把SVG导出为PNG格式，直接用require引入即可：

const errIcon = require('../assets/tick.png');

export const toastConfig = {
  error: ({ text1, props, ...rest }) => (
    <BaseToast
      {...rest}
      leadingIcon={errIcon}
      contentContainerStyle={{ paddingHorizontal: 15 }}
      text1Style={{
        fontSize: 15,
        fontWeight: '400'
      }}
      text1={text1}
    />
  )
};

内容的提问来源于stack exchange，提问作者r0n9