React Native Toast自定义：成功绿/失败红样式配置问题求助

问题原因 #

1. toast.show调用语法错误：onSuccess里的toast.show写法错误，将配置对象用逗号分隔在方法调用外部，导致type: "success"未被传递，Toast默认使用normal类型，因此显示你设置的红色。
2. 使用无效配置项：successColor和normalColor并非该库的内置props，无法通过它们设置不同类型Toast的背景色。

解决方案 #

1. 修复toast.show语法错误 #

修改页面组件代码，将配置对象作为toast.show的第二个参数传入，同时补充失败场景的Toast调用：

import { useToast } from "react-native-toast-notifications";

const onSubmit = (data: IEventPasscode) => {
  dispatch(
    eventEnterPasscode({
      body: data,
      onSuccess: () => { 
        toast.show("Hello World", {
          type: "success",
        });
      },
      onFailure: () => {
        toast.show("操作失败", {
          type: "error",
        });
      },
    }),
  );
};

2. 正确配置ToastProvider自定义样式 #

通过renderType属性为success和error类型分别定义样式，移除无效的successColor和normalColor：

import { ToastProvider } from 'react-native-toast-notifications';
import { View, Text } from 'react-native';

<ToastProvider
  placement="bottom"
  duration={5000}
  animationType='slide-in'
  animationDuration={250}
  textStyle={{ fontSize: 20 }}
  offset={50}
  offsetTop={30}
  offsetBottom={40}
  swipeEnabled={true}
  renderType={{
    success: (toast) => (
      <View style={{ 
        backgroundColor: 'green', 
        padding: 15, 
        borderRadius: 8,
        marginHorizontal: 16
      }}>
        <Text style={{ color: 'white', fontSize: 20 }}>{toast.message}</Text>
      </View>
    ),
    error: (toast) => (
      <View style={{ 
        backgroundColor: 'red', 
        padding: 15, 
        borderRadius: 8,
        marginHorizontal: 16
      }}>
        <Text style={{ color: 'white', fontSize: 20 }}>{toast.message}</Text>
      </View>
    ),
    custom_type: (toast) => (
      <View style={{ padding: 15 }}>
        <Text>{toast.message}</Text>
      </View>
    )
  }}>
  {/* 你的App内容 */}
</ToastProvider>

完成上述修改后，成功场景会显示绿色背景Toast，失败场景显示红色背景Toast，符合预期效果。

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