react native toast

Bereaksi Toast Asli

Perpustakaan roti panggang untuk reaksi-asli, dibangun di atas react-hot-poast. Ini mendukung fitur -fitur seperti roti panggang, penanganan keyboard, gesekan untuk memberhentikan, bersulang posisi, dan janji JS. Ini berjalan di iOS, android, dan web.

Github.mp4

Mengapa?

Saya tahu apa yang mungkin Anda pikirkan ( ya ampun, perpustakaan roti panggang lain? ). Percayalah di sini, ini adalah perpustakaan roti panggang terakhir yang Anda butuhkan. Saya membangun perpustakaan ini untuk memenuhi kebutuhan aplikasi spesifik saya dan memutuskan untuk bersumber terbuka setelah menyadari bahwa itu benar-benar adalah perpustakaan roti panggang terbaik. Cobalah saja.

Fitur

• Boasts ganda, beberapa opsi . Ingin bersulang di bagian atas, bawah, warna yang berbeda, atau jenis yang berbeda secara bersamaan? Mengerti.

• Penanganan keyboard (baik iOS dan Android). Pindahkan roti panggang itu keluar dari jalan dan ke tampilan saat pengguna membuka keyboard

• Gesek untuk diberhentikan

• POSIONAL BOASTS (Atas & Bawah)

• Dapat disesuaikan (gaya kustom, dimensi, durasi, dan bahkan membuat komponen Anda sendiri untuk digunakan dalam roti panggang)

• Tambahkan dukungan untuk janji <- sungguh! Panggil toast.promise(my_promise) dan saksikan pekerjaan reaksi-native-toast keajaibannya, secara otomatis memperbarui roti panggang dengan pesan khusus tentang kesuksesan-atau pesan kesalahan pada REDE.

• Berjalan di web

• Dukungan untuk Modal Asli

• Panggilan balik untuk Onpress, Onshow, dan OnHide

Dokumentasi

Lihat dokumentasi lengkap di sini

Memulai

Instalasi

 Benang tambahkan @backpackapp-io/react-native-toast# ornpm i @backpackapp-io/react-native-toast

Ketergantungan sebaya

Instal dan tautan react-native-reanimated, react-native-safe-are-context, dan react-native-gesture-handler

 Benang menambahkan react-native-reacing-native-safe-are-context react-native-gesture-handler

Pastikan Anda mengikuti pemasangan setiap paket

Menggunakan Expo?

 NPX Expo menginstal react-native-reacing-native-safe-are-context react-native-gandler-handler

Keren, sekarang apa?

Bungkus aplikasi Anda dengan <GestureHandlerRootView /> dan <SafeAreaProvider /> & tambahkan komponen <Toasts /> ke akar aplikasi Anda.

Hubungi toast("My Toast Message") setiap kali Anda siap dari mana saja di aplikasi Anda.

 impor {view, stylesheet, teks} dari 'react-native'; import {gestureHandlerrootview} dari 'react-native-gesture-handler'; import {safeareAprovider} dari 'react-native-safe-are-context'; import {toasteasprovider} , Bersulang} dari '@backpackapp-io/react-native-toast'; import {useeffect} dari 'react'; ekspor aplikasi fungsi default () {
  useeffect (() => {toast ('hello');
  }, []);

  return (<safeareProvider> <GestureHandlerRootView style = {styles.container}> <view> {/*sisa aplikasi Anda*/} </ View> <toasts/> {/*<---- tambahkan di sini*/} </GestureHandlerrootview> </safeareAprovider>
  );} const styles = stylesheet.create ({
  container: {flex: 1, alignitems: 'center', justifyContent: 'center',
  },});

Contoh

Toast biasa

 Toast ("Ini Toast Pertama Saya", {
  Durasi: 3000,});

Promise Toast

 const sleep = new janji ((resolve, reject) => {
  setTimeOut (() => {if (math.random ()> 0.5) {resolve ({username: 'nick',});} else {reject ('username tidak terdefinisi');}
  }, 2500);}); toast.promise (
  tidur,
  {Loading: 'Loading ...', Success: (data: any) => 'welcome' + data.username, error: (err) => err.toString (),
  },
  {position: toastposition.bottom,
  });

Memuat roti panggang

 const id = toast.loading ('Saya memuat. Singkirkan saya kapan pun ...'); setTimeout (() => {
  toast.dismiss (id);}, 3000);

BERTANGKAP SUKSI

 Toast.success ('Success!', {
  Lebar: 300});

Roti panggang kesalahan

 Toast.Error ('Wow. Itu menyedot!');