burnt

- เผา

โทสต์ข้ามแพลตฟอร์มสำหรับ React Native ขับเคลื่อนโดยองค์ประกอบเนทิฟ

• ติดตั้ง
• การใช้งาน

ขณะนี้รองรับ Android, iOS และเว็บแล้ว

การแจ้งเตือน

Simulator.-.iPhone.13.Pro.Max.-.16.November.2022.3.mp4

...และขนมปังปิ้ง

Simulator.-.iPhone.13.Pro.Max.-.18.พฤศจิกายน.2022.mp4

...และการสนับสนุนทางเว็บ

ตัวอย่างที่ถูกเผา.-.8.พฤษภาคม.2023.mp4

บริบท

ดูหัวข้อ Twitter นี้

อะไร

นี่คือไลบรารีที่มีวิธี toast และ alert สำหรับการแสดง UI ชั่วคราว

บน iOS จะรวม SPIndicator และ AlertKit

บน Android มันจะล้อม ToastAndroid จาก react-native Burnt.alert() กลับไปเป็น Burnt.toast() บน Android สิ่งนี้อาจมีการเปลี่ยนแปลงในเวอร์ชันอนาคต

บนเว็บ มีเนื้อหาเกี่ยวกับ sonner โดย Emil Kowalski

Burnt ใช้ได้กับทั้งสถาปัตยกรรมเก่าและใหม่ มันสร้างขึ้นบน JSI ด้วยระบบโมดูลใหม่ของ Expo

คุณสมบัติ

• toast ที่เรียบง่ายและจำเป็นซึ่งใช้ส่วนประกอบ ดั้งเดิม ภายใต้ประทุน แทนที่จะใช้สถานะ React กับ UI ที่ใช้ JS
• ไอคอนเคลื่อนไหว
• ป๊อปอัป alert คล้าย iOS App Store
• ซ้อนทับที่ด้านบนของโมดัล iOS ดั้งเดิม
• กำลังโหลดการแจ้งเตือน

โมดาล

การแสดงข้อความโทสต์ที่ด้านบนของโมดัลเป็นปัญหาใน React Native มาโดยตลอด ด้วย Burnt สิ่งนี้จะทำงานนอกกรอบ

Simulator.-.iPhone.13.Pro.Max.-.17.พฤศจิกายน.2022.mp4

การใช้งาน

 import * as Burnt from "burnt" ;

Burnt . toast ( {
  title : "Burnt installed." ,
  preset : "done" ,
  message : "See your downloads." ,
} ) ;

คุณยังสามารถ Burnt.alert() และ Burnt.dismissAllAlerts() ได้อีกด้วย

สิ่งที่ต้องทำ

• รองรับไอโอเอส
• การสนับสนุนหุ่นยนต์
• ไอคอน iOS แบบกำหนดเอง
• การสนับสนุนทางเว็บ

การติดตั้ง

yarn add burnt

งานเอ็กซ์โป

มีแนวโน้มว่าจะเบิร์นต้องใช้ Expo SDK 46+

npx expo install burnt expo-build-properties

เพิ่มปลั๊กอิน expo-build-properties ให้กับ app.json / app.config.js ของคุณ โดยตั้งค่าเป้าหมายการปรับใช้เป็น 13.0 (หรือสูงกว่า):

 export default {
  plugins : [
    [
      "expo-build-properties" ,
      {
        ios : {
          deploymentTarget : "13.0" ,
        } ,
      } ,
    ] ,
  ] ,
} ;

จากนั้น คุณจะต้องสร้างไคลเอ็นต์ dev ของคุณใหม่ Burnt จะไม่ทำงานใน Expo Go

npx expo prebuild --clean
npx expo run:ios

ปลั๊กอินกำหนดค่าช่วยให้แน่ใจว่าแอป iOS ของคุณมี iOS 13 เป็นเป้าหมายในการปรับใช้เป็นอย่างน้อย ซึ่งจำเป็นสำหรับ Burnt (รวมถึง Expo SDK 47+)

การสนับสนุนทางเว็บ

หากต้องการเปิดใช้งานการสนับสนุนทางเว็บ คุณต้องเพิ่ม <Toaster /> ไปที่รูทของแอปของคุณ หากคุณใช้ Next.js ให้เพิ่มสิ่งนี้ลงในองค์ประกอบ _app.tsx ของคุณ

 // _app.tsx
import { Toaster } from "burnt/web" ;

function MyApp ( { Component , pageProps } ) {
  return (
    < >
      < Component { ... pageProps } / >
      < Toaster position = 'bottom-right' / >
    < / >
  ) ;
}

หากคุณใช้ Next.js ให้เพิ่ม burnt ลงใน transpilePackages ของคุณใน next.config.js

 /** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages : [
    // Your other packages here
    "burnt"
  ]
}

หากต้องการกำหนด Toaster ของคุณ โปรดอ้างอิงเอกสารของ sonner

เว็บเอ็กซ์โป

หากคุณใช้ Expo Web คุณจะต้องเพิ่มสิ่งต่อไปนี้ลงในไฟล์ metro.config.js ของคุณ:

 // Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require ( "expo/metro-config" ) ;

const config = getDefaultConfig ( __dirname ) ;

// --- burnt ---
config . resolver . sourceExts . push ( "mjs" ) ;
config . resolver . sourceExts . push ( "cjs" ) ;
// --- end burnt ---

module . exports = config ;

การตอบสนองแบบธรรมดา

pod install

โซลิโต

 cd applications/app
expo install burnt expo-build-properties
npx expo prebuild --clean
npx expo run:ios
cd ../..
yarn

อย่าลืมปฏิบัติตามคำแนะนำในงานแสดงสินค้าและคำแนะนำบนเว็บด้วย

เอพีไอ

toast

Simulator.-.iPhone.13.Pro.Max.-.16.พฤศจิกายน.2022.mp4

toast(options): Promise<void>

 Burnt . toast ( {
  title : "Congrats!" , // required

  preset : "done" , // or "error", "none", "custom"

  message : "" , // optional

  haptic : "none" , // or "success", "warning", "error"

  duration : 2 , // duration in seconds

  shouldDismissByDrag : true ,

  from : "bottom" , // "top" or "bottom"

  // optionally customize layout
  layout : {
    iconSize : {
      height : 24 ,
      width : 24 ,
    } ,
  } ,
  icon : {
    ios : {
      // SF Symbol. For a full list, see https://developer.apple.com/sf-symbols/.
      name : "checkmark.seal" ,
      color : "#1D9BF0" ,
    } ,
    web : < Icon / > ,
  } ,
} ) ;

alert

Simulator.-.iPhone.13.Pro.Max.-.16.November.2022.2.mp4

API มีการเปลี่ยนแปลงนับตั้งแต่บันทึกวิดีโอนี้ ตอนนี้มันใช้ไวยากรณ์ของวัตถุ

alert(options): Promise<void>

 import * as Burnt from "burnt" ;

export const alert = ( ) => {
  Burnt . alert ( {
    title : "Congrats!" , // required

    preset : "done" , // or "error", "heart", "custom"

    message : "" , // optional

    duration : 2 , // duration in seconds

    // optionally customize layout
    layout : {
      iconSize : {
        height : 24 ,
        width : 24 ,
      } ,
    } ,
    icon : {
      ios : {
        // SF Symbol. For a full list, see https://developer.apple.com/sf-symbols/.
        name : "checkmark.seal" ,
        color : "#1D9BF0" ,
      } ,
      web : < Icon / > ,
    } ,
  } ) ;
} ;

บนเว็บ จะแสดงข้อความอวยพรตามปกติ สิ่งนี้อาจมีการเปลี่ยนแปลงในอนาคต

dismissAllAlerts()

ทำในสิ่งที่คุณคิดว่ามันทำ! ในอนาคต ฉันจะอนุญาตให้สปินเนอร์แบบอะซิงก์ทำตามสัญญา และมันจะมีประโยชน์ในตอนนั้น

มีส่วนช่วย

yarn build
cd example
yarn
npx expo run:ios # do this again whenever you change native code

คุณสามารถแก้ไขไฟล์ iOS ใน ios/ จากนั้นอัปเดต JS ตามนั้นใน src

ขอบคุณ

ขอขอบคุณเป็นพิเศษสำหรับ Tomasz Sapeta ที่ให้ความช่วยเหลือตลอดทาง

Expo Modules ทำให้การสร้างสิ่งนี้ง่ายมาก และทั้งหมดนี้ใช้ Swift โดยไม่มี Objective C นี่เป็นครั้งแรกที่ฉันเขียน Swift และมันก็เป็นเรื่องง่ายจริงๆ