react-native 10秒钟实现toast效果
使用第三方组件react-native-root-toast实现
推荐使用该组件原因如下:
- 简单易用
- 同时兼容iOS和Android,使用完全一致的接口,不用再为同时兼容两个平台再写额外的代码
- 可以自定义toast的各类属性(显示时间、位置、延时、动画、阴影等)
使用方式
1、安装开源组件
npm install react-native-root-toast
推荐使用该组件原因如下
2、页面上引入
import Toast from 'react-native-root-toast';
3、显示toast
Toast.show('this is toast message');
高级用法
import Toast from 'react-native-root-toast'; // 引入类库
// 通过调用 Toast.show(message, options); 可以在屏幕上显示一个toast,并返回一个toast实例
let toast = Toast.show('This is a message', {
duration: Toast.durations.LONG, // toast显示时长
position: Toast.positions.BOTTOM, // toast位置
shadow: true, // toast是否出现阴影
animation: true, // toast显示/隐藏的时候是否需要使用动画过渡
hideOnPress: true, // 是否可以通过点击事件对toast进行隐藏
delay: 0, // toast显示的延时
onShow: () => {
// toast出现回调(动画开始时)
},
onShown: () => {
// toast出现回调(动画结束时)
},
onHide: () => {
// toast隐藏回调(动画开始时)
},
onHidden: () => {
// toast隐藏回调(动画结束时)
}
});
// 也可以通过调用Toast.hide(toast); 手动隐藏toast实例
setTimeout(function () {
Toast.hide(toast);
}, 500);