React Native功能豐富的Toast通知庫
更新時間：2022年10月25日 15:45:50 作者：Jovie
這篇文章主要為大家介紹了React Native功能豐富的Toast通知庫使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
正文
一個功能豐富的React Native吐司庫，建立在react-hot-toast之上。
特點
- 同時進行多個敬酒活動
- 鍵盤處理（包括iOS和Android）。
- 掃一掃就可以解散
- 有位置的敬酒（頂部和底部）
- 定制樣式、尺寸、持續(xù)時間，甚至可以創(chuàng)建自己的組件用于敬酒。
- 支持承諾
- 在網絡上運行
基本用途
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.創(chuà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...');
預覽
The postFeature-rich Toast Notification Library For React Nativeappeared first onReactScript.
以上就是React Native功能豐富的Toast通知庫的詳細內容，更多關于React Native Toast通知庫的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了React如何使用axios請求數據并把數據渲染到組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
在編程開發(fā)中，網絡數據請求是必不可少的，這篇文章主要介紹了React網絡請求發(fā)起方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-09-09
這篇文章主要為大家展示了如何在 React 中使用 Axios 進行 HTTP 請求,包括 GET 和 POST 請求的使用,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
本文主要介紹了React 項目中動態(tài)設置環(huán)境變量，本文將介紹兩種常用的方法，使用 dotenv 庫和通過命令行參數傳遞環(huán)境變量，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
React中super()和super(props)的區(qū)別小結
本文主要介紹了React中super()和super(props)的區(qū)別小結,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-03-03
本文帶領大家一起探討前端框架react，涉及到前端框架react相關知識，對前端框架react相關知識感興趣的朋友一起學習吧2015-12-12
在React中,受控組件指的是表單元素的value值受React組件的state或props控制的組件,而非受控組件則是表單元素的value值由DOM自身負責管理的組件,本文將給大家詳細介紹React受控組件與非受控組件,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了React JSX基礎語法教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
30分鐘精通React今年最勁爆的新特性——React Hooks
這篇文章主要介紹了30分鐘精通React今年最勁爆的新特性——React Hooks，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了react使用CSS實現react動畫功能,結合實例形式分析了react使用CSS實現react動畫功能具體步驟與實現方法,需要的朋友可以參考下2020-05-05