burnt
0.12.2
نخب عبر الأنظمة الأساسية لـ React Native، مدعوم بعناصر أصلية.
الآن مع دعم Android وiOS والويب.
انظر هذا الموضوع تويتر.
هذه مكتبة تحتوي على طريقة toast alert لإظهار واجهة المستخدم سريعة الزوال.
على نظام التشغيل iOS، يتم تضمين SPIndicator و AlertKit .
على نظام التشغيل Android، يقوم بتغليف ToastAndroid من react-native . يعود Burnt.alert() إلى Burnt.toast() على Android. قد يتغير هذا في الإصدار المستقبلي.
على الويب، يتم sonner بواسطة إميل كوالسكي.
يعمل المحروق مع كل من البنى القديمة والجديدة. لقد تم بناؤه على رأس JSI، وذلك بفضل نظام الوحدات الجديد الخاص بـ Expo.
toast بسيط وحتمي يستخدم المكونات الأصلية تحت الغطاء، بدلاً من استخدام حالة React مع واجهة المستخدم المستندة إلى JS.alert الشبيهة بمتجر تطبيقات iOSلقد كان عرض الخبز المحمص أعلى الوسائط دائمًا مشكلة في React Native. مع Burnt، هذا يعمل خارج الصندوق.
import * as Burnt from "burnt" ;
Burnt . toast ( {
title : "Burnt installed." ,
preset : "done" ,
message : "See your downloads." ,
} ) ; يمكنك أيضًا Burnt.alert() و Burnt.dismissAllAlerts() .
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" ,
} ,
} ,
] ,
] ,
} ;بعد ذلك، ستحتاج إلى إعادة بناء عميل التطوير الخاص بك. لن يعمل برنامج 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 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تغيرت واجهة برمجة التطبيقات منذ تسجيل هذا الفيديو. ويستخدم الآن بناء جملة الكائن.
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 .
شكر خاص لتوماس سابيتا لتقديم المساعدة على طول الطريق.
جعلت Expo Modules هذا الأمر سهل الإنشاء، وكل ذلك باستخدام Swift - بدون Objective C. إنها المرة الأولى التي أكتب فيها Swift، وكان ذلك أمرًا سهلاً حقًا.
