react native toast

反應天然吐司

烤麵包庫，用於反應，建立在反應熱式的基礎上。它支持多個吐司，鍵盤處理，刷卡，位置吐司和JS承諾之類的功能。它在iOS，Android和Web上運行。

github.mp4

為什麼？

我知道您可能在想什麼（ Jeez，另一個烤麵包庫？ ）。在這里相信我，這是您需要的最後一個烤麵包庫。我構建了該庫以滿足我的特定應用需求，並在意識到它確實是一流的烤麵包庫後決定開源它。嘗試一下。

特徵

• 多個吐司，多個選項。想要同時在頂部，底部，不同顏色或不同類型的烤麵包嗎？知道了。

• 鍵盤處理（iOS和Android）。當用戶打開鍵盤時，將這些烤麵包移開並查看

• 滑動以解散

• 位置吐司（頂部和底部）

• 可自定義（自定義樣式，尺寸，持續時間，甚至創建了自己的組件，要在烤麵包中使用）

• 增加對承諾的支持< - 真的！致電toast.promise(my_promise) ，然後觀察反應式toast的魔術，並自動通過成功的自定義消息更新吐司 - 或在拒絕時發出錯誤消息。

• 在網上運行

• 支持本地模式

• OnPress，Onshow和Onhide的回調

文件

在此處查看完整文檔

入門

安裝

紗線添加 @backpackapp-io/react-native-toast＃ornpm i @backpackapp-io/react-native-toast

同行依賴

安裝和鏈接反應新的啟用，反應新的安全區域和反應式固定器處理程序

紗線添加了反應新的改裝反應 - 新的安全性區域 - 偏見反應式用戶

確保您遵循每個軟件包的安裝

使用博覽會？

 NPX Expo安裝反應新的啟用反應 - 新的安全區域 - 封閉式反應式用戶手機處理程序

酷，現在呢？

將應用程序用<GestureHandlerRootView />和<SafeAreaProvider />將您的應用程序包裝，並將<Toasts />組件添加到應用程序的根部。

每當您從應用程序中的任何地方準備就緒時，請致電toast("My Toast Message") 。

從'react-native'; import {view {view，stylesheet，text}; import {geturehandlerrootview}從'reaction-native-native-gesture handler'; import {safeareAprovider} invoration {safeareAprovider}從'react native-native-safe -area-area-context'; import {import {toast { ，toasts}來自'@backpackapp-io/react-native-toast'; import {useffect} from'react'; export默認函數app（）{
  useseffect（（）=> {toast（'Hello'）;
  }，[]）;

  返回（<SafeAreaProvider> <gestureHandlerRootView style = {styles.container}> <view> {/*您的應用程序的其餘部分</} </envureHandlerRootView> </safeareAprovider>
  ）;} const styles = stylesheet.create（{{
  容器：{flex：1，Alignitems：'Center'，JustifyContent：'Center'，
  }，}）;

例子

定期吐司

吐司（“這是我的第一個吐司”，{
  持續時間：3000，}）;

答應吐司

const sleep = new Promise（（分辨，拒絕）=> {
  setTimeout（（）=> {if（Math.random（）> 0.5）{resolve（{username：'nick'，}）;} else {refform（'username n username n n n n n defined'）;};};}
  }，2500）;}）; toast.promise（
  睡覺，
  {loading：'loading ...'，成功：（ data：any）=>'welcome' + data.username，error ：（ err）=> err.tostring（），
  }，，
  {位置：toastposition.bottom，
  }）;

加載吐司

const id = toast.loading（'我正在加載。何時in of ...'）; settimeout（（）=> {
  toast.dismiss（id）;}，3000）;

成功吐司

toast.success（'Success！'，{
  寬度：300}）;

錯誤吐司

toast.error（'哇。吮吸！'）;