基于React Native的Toast组件，完全实现And
react-native-mix-toast 轻提示
update(toast,content,{options})
hide(toast)
EXAMPLE
OPTIONS
DEMO
Android和iOS平台通用的自定义Toast UI组件
USAGE INSTALLnpm 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 |
- |
更新Toast
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| toast | 需要更新的toast | object |
- |
| content | 同show() |
string、node |
- |
| {options} | 同show() |
object |
- |
可以主动调用关闭Toast
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| toast | 需要更新的toast | object |
- |
// 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 |
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 |
- |
cd demo npm install npm start
or
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
