React Native功能豐富的Toast通知庫(kù)
正文
一個(gè)功能豐富的React Native吐司庫(kù),建立在react-hot-toast之上。
特點(diǎn)
- 同時(shí)進(jìn)行多個(gè)敬酒活動(dòng)
- 鍵盤處理(包括iOS和Android)。
- 掃一掃就可以解散
- 有位置的敬酒(頂部和底部)
- 定制樣式、尺寸、持續(xù)時(shí)間,甚至可以創(chuàng)建自己的組件用于敬酒。
- 支持承諾
- 在網(wǎng)絡(luò)上運(yùn)行
基本用途
1.安裝
# Yarn $ yarn add @backpackapp-io/react-native-toast # NPM $ npm i @backpackapp-io/react-native-toast
2.導(dǎo)入 react-native-toast
import { StyleSheet, Text } from 'react-native'; import { toast, Toasts } from '@backpackapp-io/react-native-toast'; import { useEffect } from 'react';
3.在你的應(yīng)用程序中顯示一個(gè)基本的吐司
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.可用的烤面包選項(xiàng)
toast('Hello World', { duration: 4000, position: ToastPosition.TOP, icon: 'Icon Here', styles: { view: ViewStyle, pressable: ViewStyle, text: TextStyle, indicator: ViewStyle }, });
5.創(chuàng)建不同風(fēng)格的祝酒詞
// 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...');
預(yù)覽
The postFeature-rich Toast Notification Library For React Nativeappeared first onReactScript.
以上就是React Native功能豐富的Toast通知庫(kù)的詳細(xì)內(nèi)容,更多關(guān)于React Native Toast通知庫(kù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問(wèn)題
這篇文章主要介紹了react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程詳細(xì)講解
最近在寫(xiě) React Native 項(xiàng)目,調(diào)試應(yīng)用時(shí)發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢(shì)指示條區(qū)域不是透明的,看起來(lái)很難受。研究了一下這個(gè)問(wèn)題,現(xiàn)在總結(jié)一下解決方案,這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程2023-01-01React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼
本篇文章主要介紹了React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07React中useState原理的代碼簡(jiǎn)單實(shí)現(xiàn)
要實(shí)現(xiàn)useState的背后原理,則需要深入了解狀態(tài)是如何在函數(shù)組件的渲染周期中保持和更新的,本文將通過(guò)一段代碼簡(jiǎn)單闡述useState鉤子函數(shù)的實(shí)現(xiàn)思路,希望對(duì)大家有所幫助2023-12-12React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10