React Native功能豐富的Toast通知庫

更新時間：2022年10月25日 15:45:50 作者：Jovie

這篇文章主要為大家介紹了React Native功能豐富的Toast通知庫使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

一個功能豐富的React Native吐司庫，建立在react-hot-toast之上。

特點

同時進行多個敬酒活動
鍵盤處理（包括iOS和Android）。
掃一掃就可以解散
有位置的敬酒（頂部和底部）
定制樣式、尺寸、持續(xù)時間，甚至可以創(chuàng)建自己的組件用于敬酒。
支持承諾
在網(wǎ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通知庫的詳細內(nèi)容，更多關于React Native Toast通知庫的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

react實現(xiàn)頭部導航,選中狀態(tài)底部出現(xiàn)藍色條塊問題
這篇文章主要介紹了react實現(xiàn)頭部導航,選中狀態(tài)底部出現(xiàn)藍色條塊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
React Native全面屏狀態(tài)欄和底部導航欄適配教程詳細講解
最近在寫 React Native 項目，調試應用時發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢指示條區(qū)域不是透明的，看起來很難受。研究了一下這個問題，現(xiàn)在總結一下解決方案，這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導航欄適配教程
2023-01-01
react.js框架Redux基礎案例詳解
這篇文章主要介紹了react.js框架Redux基礎案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
2021-09-09
React實現(xiàn)輪播效果
這篇文章主要為大家詳細介紹了React實現(xiàn)輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
React組件內(nèi)事件傳參實現(xiàn)tab切換的示例代碼
本篇文章主要介紹了React組件內(nèi)事件傳參實現(xiàn)tab切換的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
React組件間通訊傳值實現(xiàn)詳解
這篇文章主要介紹了React組件間通訊傳值，react組件的通信屬于開發(fā)基礎知識,今天來梳理一下,當然rudex還按老規(guī)矩排除在外,如同上篇文章的hooks一樣,單獨梳理
2022-11-11
react如何實現(xiàn)篩選條件組件
這篇文章主要介紹了react如何實現(xiàn)篩選條件組件問題,具有很好的參考價價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Electron+React進行通信的方法
electron其實是一個桌面應用程序，不是一個標準的前端web程序，所有沒有什么請求的發(fā)生，控制臺network看不到請求，而是只能通過console.log去打印查看，而且通信協(xié)議使用的不是http而是gRPC協(xié)議，這篇文章主要介紹了Electron+React如何進行通信,需要的朋友可以參考下
2022-06-06
React中useState原理的代碼簡單實現(xiàn)
要實現(xiàn)useState的背后原理,則需要深入了解狀態(tài)是如何在函數(shù)組件的渲染周期中保持和更新的,本文將通過一段代碼簡單闡述useState鉤子函數(shù)的實現(xiàn)思路,希望對大家有所幫助
2023-12-12
React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-10-10