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)絡(luò)上運行

基本用途

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)用程序中顯示一個基本的吐司

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)建不同風(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通知庫的詳細內(nèi)容，更多關(guān)于React Native Toast通知庫的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

React如何使用axios請求數(shù)據(jù)并把數(shù)據(jù)渲染到組件
這篇文章主要介紹了React如何使用axios請求數(shù)據(jù)并把數(shù)據(jù)渲染到組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
React網(wǎng)絡(luò)請求發(fā)起方法詳細介紹
在編程開發(fā)中，網(wǎng)絡(luò)數(shù)據(jù)請求是必不可少的，這篇文章主要介紹了React網(wǎng)絡(luò)請求發(fā)起方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-09-09
React中使用Axios進行HTTP請求
這篇文章主要為大家展示了如何在 React 中使用 Axios 進行 HTTP 請求,包括 GET 和 POST 請求的使用,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-11-11
React 項目中動態(tài)設(shè)置環(huán)境變量
本文主要介紹了React 項目中動態(tài)設(shè)置環(huán)境變量，本文將介紹兩種常用的方法，使用 dotenv 庫和通過命令行參數(shù)傳遞環(huán)境變量，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
React中super()和super(props)的區(qū)別小結(jié)
本文主要介紹了React中super()和super(props)的區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-03-03
深入探討前端框架react
本文帶領(lǐng)大家一起探討前端框架react，涉及到前端框架react相關(guān)知識，對前端框架react相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
React中的受控組件與非受控組件詳解
在React中,受控組件指的是表單元素的value值受React組件的state或props控制的組件,而非受控組件則是表單元素的value值由DOM自身負責(zé)管理的組件,本文將給大家詳細介紹React受控組件與非受控組件,需要的朋友可以參考下
2023-08-08
React JSX基礎(chǔ)語法教程示例
這篇文章主要為大家介紹了React JSX基礎(chǔ)語法教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
30分鐘精通React今年最勁爆的新特性——React Hooks
這篇文章主要介紹了30分鐘精通React今年最勁爆的新特性——React Hooks，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
react使用CSS實現(xiàn)react動畫功能示例
這篇文章主要介紹了react使用CSS實現(xiàn)react動畫功能,結(jié)合實例形式分析了react使用CSS實現(xiàn)react動畫功能具體步驟與實現(xiàn)方法,需要的朋友可以參考下
2020-05-05