expo-toast

react-native搞了这么多年，没有一个既简单又实用的toast。

不是过了好多年没人维护，各种报错，就是issues已读不关，再就是props封装的乱七八糟。

那么问题来了，react-native的大旗谁来扛？

一行代码直接梭哈 ...

const toast = useToast();
toast.show("HelloWorld.");

什么？想自定义样式？

完全原生的样式，会View和Text，就会自定义样式。

原理

本质上就是在根节点注入一个View，和所有的页面同一级，然后想办法在子页面的任何地方都能显示这个View。

DeviceEmitter

设备监听，这个是最直接，感觉也是最傻的方法。因为要监听一个事件，就要每次发消息，所以发消息还要再做一次封装。性能有没有问题不知道，太菜了。

Provider

这也就是这个库用的方式，像很多的状态管理库，都是根节点注入SomeStoreProvider，然后全局任何地方都能访问这个store。

所以这也就是我换了个思路，搞了一个ToastProvider。

使用

在项目的入口，注入ToastProvider。

• react-native

  • /index.js

• expo

  • /app/_layout.tsx

import { ToastProvider } from "expo-toast";

return (
  <ToastProvider>
    {/* ... Other Provider */}
    {/* App.tsx */}
    {/* ... */}
  </ToastProvider>
);

不足之处

• 多个消息的队列处理，像antd的toast一样，可以以队列的形式，一直叠加展示。

• 要自己写waring、success、info的样式，不过这也不重要，自己再封装一下，options里面丢几个颜色进去就好（:手动吃瓜）。

Props

没啥好介绍的：

position

位置，POSITION.POSITOP | POSITION.BOTTON

duration

毫秒数，想弹多久弹多久。

containerStyle

样式，和View的样式一样，用的就是ViewStyle。

textStyle

内容样式，和Text的样式一样，用的就是TextStyle。