来自'react-native-toast-notifications'的Toast原生回应

wfveoks0  于 2022-11-30  发布在  React
关注(0)|答案(1)|浏览(198)

I use react-native-toast-notification from https://github.com/arnnis/react-native-toast-notifications#readme
我想要自定义的吐司,如果成功显示绿色吐司,而在失败的红色吐司像照片。

我在应用程序中的代码:

import { ToastProvider } from 'react-native-toast-notifications'
<ToastProvider
  placement="bottom"
  duration={5000}
  animationType='slide-in'
  animationDuration={250}
  textStyle={{ fontSize: 20 }}
  offset={50}
  successColor="green"
  normalColor="red"
  offsetTop={30}
  offsetBottom={40}
  swipeEnabled={true}
  renderType={{
    custom_type: (toast) => (
      <View style={{ padding: 15 }}>
        <Text>{toast.message}</Text>
      </View>
    )
  }}>

屏幕上显示我的代码:

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

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

};
这是结果。

bvuwiixz

bvuwiixz1#

当你使用custom_type时,你应该自己设置背景颜色,例如:

renderType={{
    custom_type: (toast,bg_color) => (
      <View style={{ padding: 15 ,backgroundColor: bg_color}}>
        <Text>{toast.message}</Text>
      </View>
    )
  }}

您可以使用data属性传递bg_color:toast.show("Show custom toast", {data: { bg_color: 'green' }})

相关问题