react-native-mix-toast
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

react-native-mix-toast 轻提示

npm package npm download license Stars

DESCRIBE

Android和iOS平台通用的自定义Toast UI组件

USAGE

INSTALL

npm install react-native-mix-toast

IMPORT

import Toast, { Duration, Position } from 'react-native-mix-toast';

EXAMPLE

Toast.show('This is Toast', {
    duration: Duration.LONG,
});

FUNC

show(content,{options})

显示Toast

属性 说明 类型 默认值
content Toast显示文本内容,可为React.Node stringnode -
{options} Toast显示参数API object -

update(toast,content,{options})

更新Toast

属性 说明 类型 默认值
toast 需要更新的toast object -
content show() stringnode -
{options} show() object -

hide(toast)

可以主动调用关闭Toast

属性 说明 类型 默认值
toast 需要更新的toast object -

EXAMPLE

// show()
var myToast = Toast.show(
    'This is Toast', 
    { duration: Duration.PERSIST }
);
// update()
Toast.update(
    myToast,
    'This is Updated Toast',
    { duration: Duration.PERSIST }
);
// hide()
Toast.hide(myToast)

API

属性 说明 类型
content Toast显示文本内容,也可传入React.Node stringnode
options Toast显示设置 object

OPTIONS

属性 说明 类型 默认值
duration 显示时间,默认提供LONG,SHORT,PERSIST number SHORT
position 显示位置,默认提供BOTTOM,TOP,CENTER number BOTTOM
mask 遮罩层 bool false
icon 显示图标 numbernode -
opacity 显示透明度 number 0.8
delay 延时显示 number 0
animation 渐入渐出动画,默认提供fade,slide-right,slide-left,slide-bottom,slide-top,scale,scale-vertical,scale-horizontal string fade
custom 完全自定义显示内容 boolean false
keyboardAvoiding 避免键盘遮挡 boolean true
toastStyle Toast自定义样式 object -
textStyle Toast文本自定义样式 object -
iconStyle Toast图标自定义样式 object -
touchable 可点击内容 object -
hideOnPress 点击取消显示 boolean fasle
onPress 点击Toast触发事件 function -
onShow 显示动画开始调用函数 function -
onShown 显示动画结束调用函数 function -
onHide 消失动画开始调用函数 function -
onHidden 消失动画结束调用函数 function -

DEMO

cd demo
npm install
npm start

or

Expo

Package Sidebar

Install

npm i react-native-mix-toast

Weekly Downloads

1

Version

0.1.2

License

ISC

Unpacked Size

17 kB

Total Files

7

Last publish

Collaborators

  • barba828