React Native功能豐富的Toast通知庫(kù)
更新時(shí)間：2022年10月25日 15:45:50 作者：Jovie
這篇文章主要為大家介紹了React Native功能豐富的Toast通知庫(kù)使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
一個(gè)功能豐富的React Native吐司庫(kù)，建立在react-hot-toast之上。
特點(diǎn)
- 同時(shí)進(jìn)行多個(gè)敬酒活動(dòng)
- 鍵盤(pán)處理（包括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-11
React 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-01
這篇文章主要介紹了react.js框架Redux基礎(chǔ)案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼
本篇文章主要介紹了React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了React組件間通訊傳值，react組件的通信屬于開(kāi)發(fā)基礎(chǔ)知識(shí),今天來(lái)梳理一下,當(dāng)然rudex還按老規(guī)矩排除在外,如同上篇文章的hooks一樣,單獨(dú)梳理2022-11-11
這篇文章主要介紹了react如何實(shí)現(xiàn)篩選條件組件問(wèn)題,具有很好的參考價(jià)價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
electron其實(shí)是一個(gè)桌面應(yīng)用程序，不是一個(gè)標(biāo)準(zhǔn)的前端web程序，所有沒(méi)有什么請(qǐng)求的發(fā)生，控制臺(tái)network看不到請(qǐng)求，而是只能通過(guò)console.log去打印查看，而且通信協(xié)議使用的不是http而是gRPC協(xié)議，這篇文章主要介紹了Electron+React如何進(jìn)行通信,需要的朋友可以參考下2022-06-06
React中useState原理的代碼簡(jiǎn)單實(shí)現(xiàn)
要實(shí)現(xiàn)useState的背后原理,則需要深入了解狀態(tài)是如何在函數(shù)組件的渲染周期中保持和更新的,本文將通過(guò)一段代碼簡(jiǎn)單闡述useState鉤子函數(shù)的實(shí)現(xiàn)思路,希望對(duì)大家有所幫助2023-12-12
React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10