React Native功能丰富的Toast通知库
更新时间:2022年10月25日 15:45:50 作者:Jovie
这篇文章主要为大家介绍了React Native功能丰富的Toast通知库使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
正文
一个功能丰富的React Native吐司库,建立在react-hot-toast之上。
特点
- 同时进行多个敬酒活动
- 键盘处理(包括iOS和Android)。
- 扫一扫就可以解散
- 有位置的敬酒(顶部和底部)
- 定制样式、尺寸、持续时间,甚至可以创建自己的组件用于敬酒。
- 支持承诺
- 在网络上运行
基本用途
1.安装
# Yarn $ yarn add @backpackapp-io/react-native-toast # NPM $ npm i @backpackapp-io/react-native-toast
2.导入 react-native-toast
import { StyleSheet, Text } from 'react-native'; import { toast, Toasts } from '@backpackapp-io/react-native-toast'; import { useEffect } from 'react';
3.在你的应用程序中显示一个基本的吐司
export default function App() { useEffect(() => { toast('Hello World'); }, []); return ( <View style={styles.container}> <View>{/*The rest of your app*/}</View> <Toasts /> {/* <---- Add Here */} </View> ); }
// container styles const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, });
4.可用的烤面包选项
toast('Hello World', { duration: 4000, position: ToastPosition.TOP, icon: 'Icon Here', styles: { view: ViewStyle, pressable: ViewStyle, text: TextStyle, indicator: ViewStyle }, });
5.创建不同风格的祝酒词
// default toast('Hello World'); // success toast.success('Successfully created!'); // error toast.error('This is an error!'); // custom toast("", { customToast: (toast) => ( <View> <Text>{toast.message}</Text> </View> ) }); // loading toast.loading('Waiting...');
预览
The postFeature-rich Toast Notification Library For React Nativeappeared first onReactScript.
以上就是React Native功能丰富的Toast通知库的详细内容,更多关于React Native Toast通知库的资料请关注脚本之家其它相关文章!
相关文章
React Native全面屏状态栏和底部导航栏适配教程详细讲解
最近在写 React Native 项目,调试应用时发现顶部状态栏和底部全面屏手势指示条区域不是透明的,看起来很难受。研究了一下这个问题,现在总结一下解决方案,这篇文章主要介绍了React Native全面屏状态栏和底部导航栏适配教程2023-01-01React immer与Redux Toolkit使用教程详解
这篇文章主要介绍了React中immer与Redux Toolkit的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2022-10-10
最新评论