在手机App开发中,用 Toast 做提示消息是比较常见的。
具体到 React Native 中,官方文档中只提供了 Android 版的 Toast : https://reactnative.dev/docs/toastandroid,而没有提供 iOS 版的。这显然是不够的,因为很少有项目只开发 Android 版,而不开发 iOS 版。
开源社区中有很多热情的开发者所提供的版本,大概看了几个,实现方式都是调用系统原生的模块实现的。那么,这么一个小小的纯UI层的东东,有必要去调用原生的模块吗?
当然,对于使用者来说,用什么实现的都无所谓。只要封装好了,用起来方便就行。
但是,我又要说但是,这样的实现方式会存在这样的问题:在 Android 和 iOS 上的表现不一致,最重要的是,如果只是简单的使用,使用方式是一样的,但若要做一些稍深一点的自定义(比如说样式、呈现方式),就需要为 Android 和 iOS 各写一套代码。原因很简单,因为是调用原生模块实现的,而 Android 和 iOS 的原生接口各有各的功能和参数。
基于此,我在 rn-overlay 中实现了一个 Toast 。因为没有调用原生模块,所以它在 Android 和 iOS 上的表现是一致的,并且使用方法也是一致的。
源码在这里:https://github.com/caoyongfeng0214/rn-overlay 。
(如果觉得还不错,就点个 Star 鼓励一下吧。~_~ 。发现前端开发者好多没有点 Star 的习惯。有些包在 npm 上明明看到有不少人在使用,但收到的 Star 却廖廖无几。~_~。顺手点一下,是对开发者的鼓励。)
下图是实现效果:
下面说说使用方法。
首先当然是在你的项目中安装它:
npm install rn-overlay --save
然后在你的项目的根目录下的 ./index.js
中 import
刚刚安装的包。做完后,你的 ./index.js
应该是类似下面这样子的:
import 'rn-overlay';
import {
AppRegistry} from 'react-native';
import App from './App';
import {
name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
注意,应该在文件的最上面 import
它。这样做的目的是为了使后面的代码写起来更方便。
做完以上这些,你就可以在其它文件中像下面这样 import
rn-overlay 了。