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 了。

import { Overlay } from 'react-native';

注意，rn-overlay 不是 Toast ，Toast 是 rn-overlay 包含的一个模块。

应该像下面这样得到 Toast ：

import { Overlay } from 'react-native';

const Toast = Overlay.Toast;

下面是一个完整的示例：

import React from 'react';
import { View, Button, Overlay } from 'react-native';

const Toast = Overlay.Toast;

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    onShowToastClick = () => {
        Toast.show('Hello Toast');
    }

    render() {
        return <View style={{paddingVertical:88}}>
            <Button title="Show a Toast" onPress={this.onShowToastClick}/>
        </View>
    }
}

export default App;

给 show() 方法传一个字符串参数，就能弹出提示消息了，稍等一会该消息将自动消失。

当然，这是默认的表现与样式。你还可以自定义它。

比如，如果你觉得消息消失得太快了，想等时间久一点再让消息消失，那么就可以给它传第二个参数：

Toast.show('Hello Toast', 5000);

这样，消息将在5秒后消失。

你还可以自定义消息的样式。比如，你可能想用红色显示一个警告类的消息：

Toast.show('Hello Toast', 5000, {
	textStyle: {
        backgroundColor: '#ad0000',
        color: '#ffff59'
    }
});

可作用在 Text component 上的样式都可用在这里的 textStyle 上。

如果你觉得消息停留的时间是令你满意的，那么可以省掉一个参数：

Toast.show('Hello Toast', {
	textStyle: {
        backgroundColor: '#ad0000',
        color: '#ffff59'
    }
});

还可以设置消息展示的位置，下面的代码将消息展示在左边：

Toast.show('Hello Toast', {
	textStyle: {
        backgroundColor: '#ad0000',
        color: '#ffff59'
    },
    position: Toast.Position.Left
});

position 可接受的值还有：Toast.Position.Right、Toast.Position.Top、Toast.Position.Bottom、Toast.Position.LeftTop、Toast.Position.LeftBottom、Toast.Position.RightTop、Toast.Position.RightBottom 。

顾名思义，就不一个一个解释了。实在不明白就动手试验一下。

如果这还不能满足你的需求，那么你可以通过 textStyle 用样式来将消息显示在任意位置：

Toast.show('Hello Toast', {
	textStyle: {
        backgroundColor: '#ad0000',
        color: '#ffff59',
        position: 'absolute',
        left: 100,
        top: 200
    }
});

还可自定义动画时长和动画方式：

Toast.show('Hello Toast', {
    easingDuration: 1000,
    animateEasing: Easing.bezier(0, 2, 1, -1)
});

关于 animateEasing 的值，可参考这里：https://reactnative.dev/docs/easing 。

可以用 onShow 和 onClose 来监控 Toast 的显示和关闭：

Toast.show('Hello Toast', {
	onShow: () => {
		console.log('Toast 显示了');
	},
	onClose: () => {
		console.log('Toast 关闭了');
	}
});

好吧。大概就是这些。更详细的可以参考 github 上的文档。

记得顺手点个 Star 哦。～_～

---