Toast.md

Toast{} 轻提示

Toast 为轻提示静态类, 与 Android 的 Toast 作用类似, 使用纯 JS 编写, 在 iOS 与 Android 下有同样的显示效果。
Toast 基于 Overlay{} 实现。

Static Methods

Method	Params	Returns	Notes
Overlay methods			Toast 继承 Overlay 的全部静态方法。
show	options	key	显示一个轻提示, 重写 Overlay{} 中的同名函数, 输入参数 options 为 duration 与 ToastView 的属性合集, 返回唯一的浮层 key 值。 一般不直接调用此函数
message	text, duration, position	key	显示一个纯文本轻提示框。 duration 默认为 'short', position 默认为 'bottom' 。 默认值可通过 Toast.messageDefaultDuration 、 Toast.messageDefaultPosition 修改。
success	text, duration, position	key	显示一个成功轻提示框, 提示框中有一个打勾图标。 duration 默认为 'short', position 默认为 'center' 。 默认值可通过 Toast.defaultDuration 、 Toast.defaultPosition 修改。 下同
fail	text, duration, position	key	显示一个失败轻提示框, 提示框中有一个打叉图标。
smile	text, duration, position	key	显示一个笑脸轻提示框, 提示框中有一个笑脸表情图标。
sad	text, duration, position	key	显示一个难过轻提示框, 提示框中有一个难过表情图标。
info	text, duration, position	key	显示一个信息轻提示框, 提示框中有一个 Info 图标。
stop	text, duration, position	key	显示一个停止轻提示框, 提示框中有一个图标。

Static Props

Prop	Type	Default	Note
ToastView	class		Toast 内容显示组件。
defaultDuration	string	'short'	success, fail, smile, sad, info, stop 函数的 duration 参数默认值, 轻提示框显示时长。 - short: 2000 毫秒 - long: 3500毫秒
defaultPosition	string	'center'	success, fail, smile, sad, info, stop 函数的 position 参数默认值, 轻提示框显示位置。参见 Toast.ToastView。
messageDefaultDuration	string	'short'	message 函数的 duration 参数默认值。
messageDefaultPosition	string	'bottom'	message 函数的 position 参数默认值。

<Toast.ToastView /> Props

Prop	Type	Default	Note
View props...			Toast.ToastView 组件继承 View 组件的全部属性。
text	string number element		轻提示文本, 可以是字符串、数字或 React Native 组件。
icon	string 同Image.source element		图标, 可以是 string 枚举、 Image.source 或 React Native 组件。 - none: 无图标 - success: 成功, 打勾图标 - fail: 失败, 打叉图标 - smile: 笑脸表情图标 - sad: 难过表情图标 - info: 信息, 圆圈里一个字母 "i" - stop: 停止, 圆圈里一个感叹号 "!"
position	string	'center'	轻提示框显示位置。 - top: 窗口靠上位置 - bottom: 窗口靠下位置 - center: 窗口中间位置 top 、 bottom 位置可在 Theme 中设置。

Example

简单用法

Toast.message('Toast message');
Toast.success('Toast success');
Toast.fail('Toast fail');
Toast.smile('Toast smile');
Toast.sad('Toast sad');
Toast.info('Toast info');
Toast.stop('Toast stop');

自定义

static customKey = null;

showCustom() {
  if (ToastExample.customKey) return;
  ToastExample.customKey = Toast.show({
    text: 'Toast custom',
    icon: <ActivityIndicator size='large' color={Theme.toastIconTintColor} />,
    position: 'top',
    duration: 1000000,
  });
}

hideCustom() {
  if (!ToastExample.customKey) return;
  Toast.hide(ToastExample.customKey);
  ToastExample.customKey = null;
}

Screenshots