0.9.5 • Published 4 years ago
@jushuitan/react-native-toast v0.9.5
react-native-toast
- react-native 基础弹框,使用 View 与 Text 创建，不使用 modal，函数式使用。
- animationInTiming 与 animationOutTiming 将完整展现，不会因为提前 hide 而闪退
- loading 默认延时 300 显示
Install
npm install react-native-toast
设置
| 变量 | 默认值 | 类型 | 解释 |
|---|---|---|---|
| type | text | String | text: 纯文本 success: 成功图标 fail: 失败图标 loading: 加载 icon: 图标 |
| delay | 1500 | Number | 弹出持续时间， loading 默认不关闭 |
| position | middle | String | 位置 top middle bottom |
| title | 请填写 title | String | title |
| text | null | String | text |
| iconComponent | null | node | icon 显示 |
| overlay | false | Bool | 遮罩 禁止用户点击，loading 默认开启 |
| animationInTiming | 280 | Number | 模态框进入动画时长 |
| animationOutTiming | 280 | Number | 模态框离开动画时长 |
| loadingDelay | 300 | Number | lodaing 延迟显示，这段时间内如果直接调用 hide， toast 将不会显示 |
使用
text
Toast.show({
position: 'top',
title: '嘻嘻，我在上面',
text: '12121212'
})icon
Toast.show({
position: 'bottom',
type: 'icon',
title: '嘻嘻，我在下面',
iconComponent: <Icon name="paixu1" color="#ffffff" size={26} />
})success fail
Toast.show({
type: 'success'
})
Toast.show({
type: 'fail',
title: '我是错误'
})loading
const Loading = Toast.show({
type: 'loading',
title: 1212121212
})
setTimeout(() => {
Loading.hide()
}, 3000)