react native toast

Reagieren Sie nativen Toast

Eine Toastbibliothek für React-Native, die auf React-HOT-Juckreiz basiert. Es unterstützt Funktionen wie mehrere Toasts, Tastaturhandhabung, Wischung, um zu entlassen, Positions -Toasts und JS -Versprechen. Es läuft auf iOS, Android und Web.

Github.mp4

Warum?

Ich weiß, was Sie vielleicht denken ( Herrgott, eine weitere Toastbibliothek? ). Vertrauen Sie mir hier, dies ist die letzte Toastbibliothek, die Sie benötigen. Ich habe diese Bibliothek so erstellt, dass sie meine speziellen App-Bedürfnisse erfüllen, und beschloss, sie zu open-Source, nachdem er erkannt hatte, dass sie wirklich eine erstklassige Toastbibliothek ist. Probieren Sie es einfach aus.

Merkmale

• Mehrere Toasts, mehrere Optionen . Möchten Sie einen Toast oben, unten, verschiedene Farben oder verschiedene Typen gleichzeitig? Habe es.

• Tastaturhandhabung (sowohl iOS als auch Android). Bewegen Sie diese Toasts aus dem Weg und in den Sicht, wenn der Benutzer die Tastatur öffnet

• Wischen, um zu entlassen

• Positionentoast (oben und unten)

• Anpassbar (benutzerdefinierte Stile, Abmessungen, Dauer und sogar Ihre eigene Komponente erstellen, die im Toast verwendet werden soll)

• Fügen Sie Unterstützung für Versprechen hinzu <- Wirklich! Rufen Sie toast.promise(my_promise) an und beobachten Sie die React-Native-Journal-Arbeit, wodurch der Toast automatisch mit einer benutzerdefinierten Nachricht zum Erfolg aktualisiert wird-oder eine Fehlermeldung bei Ablehnung.

• Läuft im Web

• Unterstützung für native Modale

• Rückrufe für Onpress, Onshow und Onhide

Dokumentation

Sehen Sie sich hier die vollständige Dokumentation an

Erste Schritte

Installation

 Garn add @Backpackapp-io/React-Native-Joves# ornpm i @Backpackapp-io/React-Native-Jungs

Peer -Abhängigkeiten

React-nativ-reakteanierte, reagieren-nativ-safe-gontextext und reagieren-nativ-ralg-Handler installieren und verknüpfen.

 Garn-add-Reakt-nativ-reaktierte Reakt-nativ-safe-Gebietskontext-React-Native-Reter-Handler

Stellen Sie sicher, dass Sie die Installation jedes Pakets befolgen

Verwenden Sie Expo?

 NPX Expo Installation React-Native-Reakte-Native-Safe-Gebietskontext-Reakt-Nativ-Grügen-Handler

Cool, nun was?

Wickeln Sie Ihre App mit <GestureHandlerRootView /> und <SafeAreaProvider /> ein und fügen Sie die <Toasts /> -Komponente zum Stammvermögen Ihrer App hinzu.

Rufen Sie toast("My Toast Message") an, wenn Sie von überall in Ihrer App bereit sind.

 Import {View, Stylesheet, Text} aus 'React-nativ'; Import {GestureHandlerRootView} aus 'React-native-reter-Handler'; Import {SafeareProvider} aus 'React-nativ-safe-area-context'; Import {Toast , Toasts} aus '@backpackapp-io/react-nativ'; import {useeffect} aus 'React'; Export-Standardfunktion app () {{
  useEffect (() => {Toast ('Hallo');
  }, []);

  return (<SafeareAprovider> <GestureHandlerRootView style = {styles.container}> <view> {/*Der Rest Ihrer App*/} </view> <toasts/> {/*<---- Fügen Sie hier*/} </GestureHandlerRootView> </SAFEAREAPROVIDER>
  );} const styles = stylesheet.create ({{{{{{{
  Container: {Flex: 1, Alignitems: 'Center', JustifyContent: 'Center',,
  },});

Beispiel

Regelmäßiger Toast

 Toast ("Dies ist mein erster Toast", {
  Dauer: 3000,});

Versprechen Sie Toast

 const sleep = New Promise ((Resolve, ablehnen) => {
  setTimeout (() => {if (math.random ()> 0.5) {Resolve ({Benutzername: 'Nick',});} else {reject ('Benutzername ist undefiniert');};
  }, 2500);}); Toast.Promise (
  schlafen,
  {Laden: 'Laden ...', Erfolg: (Daten: Any: Any) => 'Willkommen' + Data.Unername, Fehler: (err) => err.toString (),,
  },
  {Position: Toastposition.Bottom,
  });

Toast laden

 const id = toast.loading ('Ich lade. Entlasse mich wann immer ...'); setTimeout (() => {
  toast.dismiss (id);}, 3000);

Erfolgs Toast

 toast.success ('Erfolg!', {
  Breite: 300});

Fehlertoast

 Toast.Error ('wow. Das saugte!');