React-native-mix-toast NPM

react-native-mix-toast 轻提示

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 | string、node | - | | {options} | Toast显示参数API | object | - |

update(toast,content,{options})

更新Toast 属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | toast | 需要更新的toast | object | - | | content | 同show() | string、node | - | | {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`	`string`、`node`
options	Toast显示设置	`object`

OPTIONS

属性	说明	类型	默认值
duration	显示时间，默认提供`LONG`,`SHORT`,`PERSIST`	`number`	`SHORT`
position	显示位置，默认提供`BOTTOM`,`TOP`,`CENTER`	`number`	`BOTTOM`
mask	遮罩层	`bool`	`false`
icon	显示图标	`number`、`node`	-
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`	-