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

DEMO

cd demo
npm install
npm start

or