react native toast

ネイティブトーストを反応させます

React-Hot Toastの上に構築されたReact-Nativeのトーストライブラリ。複数のトースト、キーボードの取り扱い、解雇するためのスワイプ、位置トースト、JSの約束などの機能をサポートしています。 iOS、Android、およびWebで実行されます。

github.mp4

なぜ？

私はあなたが何を考えているのか知っています（ジーズ、別のトーストライブラリ？ ）。ここで私を信じてください、これはあなたが必要とする最後のトーストライブラリです。私は特定のアプリのニーズを満たすためにこのライブラリを構築し、それが本当に一流のトーストライブラリであることに気付いた後、それをオープンソースすることにしました。試してみてください。

特徴

• 複数のトースト、複数のオプション。上部、下部、さまざまな色、または異なるタイプにトーストを同時にしたいですか？わかった。

• キーボード処理（iOSとAndroidの両方）。ユーザーがキーボードを開いたときに、これらのトーストを邪魔にせずに視界に移動します

• スワイプして却下します

• 位置トースト（上下）

• カスタマイズ可能（カスタムスタイル、寸法、期間、さらにはトーストで使用する独自のコンポーネントを作成することもできます）

• 約束のサポートを追加< - 本当に！ toast.promise(my_promise)を呼び出し、React-Native-Toast Workその魔法を見て、成功に関するカスタムメッセージでトーストを自動的に更新するか、拒否に関するエラーメッセージを更新します。

• Webで実行されます

• ネイティブモーダルのサポート

• OnPress、OnShow、Onhideのコールバック

ドキュメント

ここで完全なドキュメントをご覧ください

はじめる

インストール

yarn add @backpackapp-io/React-native-toast＃ornpm i @backpackapp-io/React-native-toast

ピア依存関係

React-Native-Reanimated、React-Native-Safe-Area-context、およびReact-Native-Gesture Handlerをインストールしてリンクします

Yarnは、React-Native-Reanimated React-Native-Safe-Area-Context React-Native-Gesture Handlerを追加します

各パッケージのインストールに従ってください

博覧会を使用しますか？

 NPX ExpoインストールReact-Native-Native-Native-reanimated React-Native-Safe-Area-Area-Area-context React-Native-Gesture Handler

かっこいい、今何？

<GestureHandlerRootView />および<SafeAreaProvider />でアプリをラップし、 <Toasts />コンポーネントをアプリのルートに追加します。

アプリのどこからでも準備ができているときはいつでもtoast("My Toast Message")に電話してください。

 Import {view、styleSheet、text} from 'React-native'; import {gesturehandlerrootview} from 'React-native-gesture handler'; import {safeareaprovider} from 'ruce native-safe-area-context'; import {toastoast 、TOASTS} from '@backpackapp-io/React-native-toast'; import {useeffect} from 'React'; export default function app（）{
  useefect（（）=> {toast（ 'hello'）;
  }、[]）;

  return（<Safeareaprovider> <GestureHandlerRootview style = {styles.container}> <view> {/*残りのアプリ*/} </view> <toasts/> {/*<----ここに追加*/} </gesturehandlerrootview> </safeareaprovider>
  ）;} const styles = styleSheet.create（{
  コンテナ：{flex：1、alignitems： 'center'、justifycontent： 'center'、
  }、}）;

例

通常のトースト

トースト（「これは私の最初のトーストです」、{
  期間：3000、}）;

トーストを約束します

const sleep = new Promise（（Resolve、Reject）=> {
  settimeout（（）=> {if（math.random（）> 0.5）{resolve（{username： 'nick'、}）;} else {reject（ 'username is undefined'）;}
  }、2500）;}）; toast.promise（
  寝る、
  {ロード： 'Loading ...'、success：（data：any）=> 'welcome' + data.username、error：（err）=> err.toString（）、
  }、
  {position：toastposition.bottom、
  }）;

トーストのロード

const id = toast.loading（ '私はロードしています。いつでも私を却下します...'）; setimeout（（）=> {
  toast.dismiss（id）;}、3000）;

成功トースト

toast.success（ 'success！'、{
  幅：300}）;

エラートースト

toast.error（ 'すごい。それは吸った！'）;