หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ทำปฏิกิริยากับขนมปังปิ้ง

ห้องสมุดขนมปังปิ้งสำหรับ React-Native สร้างขึ้นบนปฏิกิริยาความร้อนแรง รองรับคุณสมบัติต่าง ๆ เช่นขนมปังปิ้งหลายครั้งการจัดการคีย์บอร์ดปัดเพื่อยกเลิกขนมปังปิ้งตำแหน่งและสัญญา JS มันทำงานบน iOS, Android และเว็บ

github.mp4

ทำไม

ฉันรู้ว่าคุณกำลังคิดอะไรอยู่ ( Jeez ห้องสมุดขนมปังปิ้งอื่น? ) เชื่อใจฉันที่นี่นี่เป็นห้องสมุดขนมปังสุดท้ายที่คุณต้องการ ฉันสร้างห้องสมุดนี้เพื่อตอบสนองความต้องการแอพเฉพาะของฉันและตัดสินใจที่จะเปิดแหล่งข้อมูลหลังจากตระหนักว่ามันเป็นห้องสมุดขนมปังปิ้งสุดยอดอย่างแท้จริง เพียงแค่ลองดู

คุณสมบัติ

  • ขนมปังปิ้งหลายตัวเลือกหลายตัวเลือก ต้องการขนมปังปิ้งที่ด้านบนด้านล่างสีที่แตกต่างกันหรือประเภทต่าง ๆ ในเวลาเดียวกัน? เข้าใจแล้ว.

  • การจัดการแป้นพิมพ์ (ทั้ง iOS และ Android) ย้ายขนมปังปิ้งออกไปให้พ้นทางและเข้าสู่มุมมองเมื่อผู้ใช้เปิดคีย์บอร์ด

  • ปัดเพื่อยกเลิก

  • ขนมปังปิ้งตำแหน่ง (ด้านบนและล่าง)

  • ปรับแต่งได้ (รูปแบบที่กำหนดเองขนาดระยะเวลาและแม้แต่สร้างองค์ประกอบของคุณเองที่จะใช้ในขนมปังปิ้ง)

  • เพิ่มการสนับสนุนสำหรับ สัญญา <- จริงๆ! Call toast.promise(my_promise) และดู react-native-toast ทำงานเวทมนตร์ของมันอัปเดตขนมปังปิ้งโดยอัตโนมัติด้วยข้อความที่กำหนดเองเกี่ยวกับความสำเร็จ-หรือข้อความแสดงข้อผิดพลาดเมื่อถูกปฏิเสธ

  • ทำงานบน เว็บ

  • สนับสนุนโมดาลเนทีฟ

  • การโทรกลับสำหรับ Onpress, Onshow และ Onhide

เอกสาร

ดูเอกสารฉบับเต็มได้ที่นี่

เริ่มต้น

การติดตั้ง

 เส้นด้ายเพิ่ม @backpackapp-io/react-native-toast# ornpm i @backpackapp-io/react-native-toast

การพึ่งพาเพียร์

ติดตั้งและเชื่อมโยง react-native-reanimated, react-native-safe-area-context

 เส้นด้ายเพิ่ม React-Native-reanimated React-Native-Safe-area-arexte

ให้แน่ใจว่าคุณติดตามการติดตั้งแต่ละแพ็คเกจ

ใช้งานแสดงสินค้า?

 NPX Expo ติดตั้ง React-native-reanimated react-natial-safe-area-contexte

เจ๋งตอนนี้คืออะไร?

ห่อแอพของคุณด้วย <GestureHandlerRootView /> และ <SafeAreaProvider /> & เพิ่มส่วนประกอบ <Toasts /> ลงในรูทของแอปของคุณ

Call toast("My Toast Message") เมื่อใดก็ตามที่คุณพร้อมจาก ทุกที่ ในแอพของคุณ

 นำเข้า {view, stylesheet, text} จาก 'react-native'; นำเข้า {GestureHandlerRootView} จาก 'Reaction-Native-sterfer-handler'; นำเข้า {SafeAreAprovider} จาก 'React-native-safe-area-context , toasts} จาก '@backpackapp-io/react-native-toast'; นำเข้า {useeffect} จาก 'react'; Export Function Function App () {
  useEffect (() => {toast ('hello');
  -

  return (<safeareAprovider> <GestureHandlerRootView style = {styles.container}> <siew> {/*แอปที่เหลือของคุณ*/} </side> <toasts/> {/*<---- เพิ่มที่นี่*/} </save gesturehandlerrootview> </afeareaprovider>
  );} const styles = stylesheet.create ({
  คอนเทนเนอร์: {Flex: 1, AlignItems: 'Center', JustifyContent: 'Center',
  -

ตัวอย่าง

ขนมปังปิ้งธรรมดา

 ขนมปังปิ้ง ("นี่เป็นขนมปังแรกของฉัน", {
  ระยะเวลา: 3000,});

สัญญาขนมปังปิ้ง

 const sleep = สัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
  settimeout (() => {if (math.random ()> 0.5) {Resolve ({username: 'nick',});} อื่น {ปฏิเสธ ('ชื่อผู้ใช้ไม่ได้กำหนด');}
  }, 2,500);}); toast.promise (
  นอน,
  {โหลด: 'การโหลด ... ', ความสำเร็จ: (ข้อมูล: ใด ๆ ) => 'ยินดีต้อนรับ' + data.username, ข้อผิดพลาด: (err) => err.toString (),
  -
  {ตำแหน่ง: toastposition.bottom,
  -

โหลดขนมปังปิ้ง

 const id = toast.loading ('ฉันกำลังโหลด. ยกเลิกฉันทุกครั้งที่ ... '); settimeout (() => {
  toast.dismiss (id);}, 3000);

ความสำเร็จขนมปังปิ้ง

 toast.success ('ความสำเร็จ!', {
  ความกว้าง: 300});

ข้อผิดพลาดขนมปังปิ้ง

 Toast.error ('ว้าว. ที่ดูด!');
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด