React Native Toast 提示消息，使用rn-overlay

在手机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 了。