الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

رد فعل توست الأصلي

مكتبة نخب للتفاعل ، بنيت على رد الفعل. وهو يدعم ميزات مثل الخبز المحمص المتعدد ، ومعالجة لوحة المفاتيح ، والتمرير لإقالة ، ونخب الموضعية ، ووعود JS. يعمل على iOS و Android و Web.

github.mp4

لماذا؟

أعرف ما الذي قد تفكر فيه ( Jeez ، مكتبة توست أخرى؟ ). ثق بي هنا ، هذه هي آخر مكتبة نخب ستحتاجها. لقد قمت ببناء هذه المكتبة لتلبية احتياجاتي الخاصة بالتطبيقي وقررت فتح المصدر بعد إدراكها أنها حقًا مكتبة نخب من الدرجة الأولى. فقط جربها.

سمات

  • نخب متعددة ، خيارات متعددة . هل تريد نخبًا في الأعلى أو أسفل أو ألوان مختلفة أو أنواع مختلفة في نفس الوقت؟ فهمتها.

  • لوحة المفاتيح (كل من iOS و Android). انقل هذه الخبز المحمص خارج الطريق وإلى عرض عندما يفتح المستخدم لوحة المفاتيح

  • انتقد لإقالة

  • الخبز المحمص الموضعي (أعلى وأسفل)

  • قابل للتخصيص (أنماط مخصصة ، أبعاد ، مدة ، وحتى إنشاء مكونك الخاص لاستخدامه في الخبز المحمص)

  • أضف الدعم للوعود <- حقا! Call toast.promise(my_promise) وشاهد العمل ، يعمل ردود الفعل على سحرها ، وتحديث الخبز المحمص تلقائيًا برسالة مخصصة حول النجاح-أو رسالة خطأ عند الرفض.

  • يعمل على الويب

  • دعم للضعف الأصلي

  • عروض عمليات الاسترداد لـ Onpress و Onshow و Onhide

الوثائق

عرض الوثائق الكاملة هنا

ابدء

تثبيت

 add add @backpackapp-io/react-natist# ornpm i @backpackapp-io/React-tost

تبعيات الأقران

التثبيت والرابط المتفاعل بين التواصل ، والمواد الآمنة في منطقة رد الفعل ، والمنطقة الآمنة ، ومعالج الإفراط في الإفراط في رد الفعل

 الغزل أضف رد فعل مفاعل-ريب الآمن-آمن من آمن منطقة رد الفعل-معالج الإفراطية الأصلية

تأكد من اتباع تثبيت كل حزمة

باستخدام المعرض؟

 NPX Expo Install React-Native-Breacted-Native-Safe-Area-Area-Area-Context React-Descontist-desconter

رائع ، ماذا الآن؟

قم بلف تطبيقك باستخدام <GestureHandlerRootView /> و <SafeAreaProvider /> وأضف مكون <Toasts /> إلى جذر التطبيق الخاص بك.

استدعاء toast("My Toast Message") كلما كنت جاهزًا من أي مكان في التطبيق الخاص بك.

 استيراد {view ، stylesheet ، text} من 'React-native' ؛ import {gestureHandlerRootView} من 'React-native-gestre-learler' ؛ imporg ، Toasts} من '@packpackapp-io/react-native-tost' ؛ import {useEffect} من 'React' ؛ تصدير وظيفة الوظيفة الافتراضية () {
  useEffect (() => {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 = وعد جديد ((حل ، رفض) => {
  setTimeOut (() => {if (math.random ()> 0.5) {حل ({username: 'nick' ،}) ؛} آخر {رفض ('اسم المستخدم غير محدد') ؛}
  } ، 2500) ؛}) ؛ Toast.Promise (
  ينام،
  {loading: 'loading ...' ، النجاح: (البيانات: any) => 'مرحبًا' data.username ، error: (err) => err.toString () ،
  } ،
  {الموضع: Toastposition.bottom ،
  }) ؛

التحميل الخبز المحمص

 const id = toast.loading ('أنا أحمل. ارفضني كلما ...') ؛ setTimeOut (() => {
  Toast.Dismiss (id) ؛} ، 3000) ؛

نخب النجاح

 Toast.Success ("النجاح!" ، {
  العرض: 300}) ؛

نخب الخطأ

 Toast.Error ('wow. ذلك امتص!') ؛
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل