React Native使用react-native-toast-message自定义Toast报错排查

核心问题排查 #

1. "Toast type: 'CustomToast' does not exist" 错误原因 #

• 自定义类型未在toastConfig中正确注册，或者调用show方法时类型名拼写错误
• 根组件未正确挂载配置好toastConfig的Toast组件

2. 内置样式修改不生效原因 #

• 未将自定义配置传入根组件的Toast实例，导致默认配置未被覆盖

完整解决方案代码示例 #

步骤1：创建自定义Toast组件 #

// components/CustomToast.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const CustomToast = ({ text1, text2 }) => {
  return (
    <View style={styles.toastContainer}>
      <Text style={styles.text1}>{text1}</Text>
      {text2 && <Text style={styles.text2}>{text2}</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  toastContainer: {
    backgroundColor: '#ffeeee', // 浅红色背景
    padding: 12,
    borderRadius: 8,
    maxWidth: '90%',
    alignSelf: 'center',
  },
  text1: {
    color: '#333', // 自定义主文字颜色
    fontSize: 14,
    fontWeight: '500',
    marginBottom: 4,
  },
  text2: {
    color: '#666', // 自定义次要文字颜色
    fontSize: 12,
  },
});

export default CustomToast;

步骤2：在根组件配置ToastConfig #

// App.js
import React from 'react';
import { View } from 'react-native';
import Toast from 'react-native-toast-message';
import CustomToast from './components/CustomToast';

const toastConfig = {
  // 注册自定义Toast类型（key需和调用时的type完全一致）
  customToast: ({ text1, text2, ...rest }) => (
    <CustomToast text1={text1} text2={text2} {...rest} />
  ),
  // 覆盖内置success类型的样式
  success: ({ text1, text2, ...rest }) => (
    <View style={{
      backgroundColor: '#ffeeee',
      padding: 12,
      borderRadius: 8,
      maxWidth: '90%',
    }}>
      <Text style={{ color: '#333', fontSize: 14 }}>{text1}</Text>
      {text2 && <Text style={{ color: '#666', fontSize: 12 }}>{text2}</Text>}
    </View>
  ),
};

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      {/* 你的业务组件 */}
      <Toast config={toastConfig} />
    </View>
  );
};

export default App;

步骤3：正确调用自定义Toast #

// 在任意业务组件中调用
Toast.show({
  type: 'customToast', // 必须和toastConfig中的key完全匹配
  text1: '自定义提示标题',
  text2: '这是自适应高度的内容，即使文字长度超出一行，也会自动换行撑开容器，不会出现溢出问题',
});

// 调用修改后的success类型
Toast.show({
  type: 'success',
  text1: '操作成功',
  text2: '已按照自定义样式显示成功提示',
});

关键注意事项 #

• 自定义类型的key（如customToast）和调用show时的type参数必须完全一致，大小写敏感
• 根组件必须挂载Toast组件并传入config属性，否则所有自定义配置都不会生效
• 高度自适应无需额外设置，只要不给容器固定高度，靠内容和内边距自然撑开即可，搭配maxWidth避免过宽导致文字溢出
• 如果使用React Navigation，确保Toast组件挂载在导航容器之外，防止被导航栏遮挡

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