更全、更好的 React-Native Toast组件

41次阅读

共计 587 个字符,预计需要花费 2 分钟才能阅读完成。

在 React-Native 如果用到提示 (网络请求失败等短暂的显示提示用户) 的话大多数在项目可能用的 react-native-root-toast、react-native-easy-toast, 如果用到加载,可能就得自己写 Modal 加载,在开发了几个 React-Native 项目时,发现一些提示缺陷,所以就写了一个组件 react-native-smart-tip。

react-native-smart-tip
现有提示框的一些问题

Toast 提示重叠之前在项目使用发现,单击登录提示登录中,登录成功后提示登录成功。由于速度过快,出现重影问题,两个提示 Toast 都集中在中心位置,让人看着很不舒服。

没有动画现在的一些版本安卓手机自带的进场是有一个从下到上的动画的,但 React-Native 现有的 Toast 组件暂时都没有,所以当时开发项目时对着 react-native-root-toast 改了一下,当时也就没再看了。

有 Modal 提示框时 Toast 被遮盖在显示了 Modal 框时 Toast 将会被遮盖,这个是由于视图层优先级的关系,之前的解决办法是在 Modal 上加一些提示。

组件优点

解决了 Toast 提示重复问题。
提示新增动画。
提示新增文字模式和文字加图片模式。
新增安卓 SnackBar 提示功能。
新增 Modal 提示,可以实现加载提示和 Modal 状态下提示。

静态效果演示

GIF 演示

组件地址

正文完
 0