burnt
0.12.2
Plattformübergreifende Toasts für React Native, unterstützt durch native Elemente.
Jetzt mit Android-, iOS- und Web-Unterstützung.
Siehe diesen Twitter-Thread.
Dies ist eine Bibliothek mit einer toast und alert zum Anzeigen einer kurzlebigen Benutzeroberfläche.
Unter iOS werden SPIndicator und AlertKit umschlossen.
Unter Android wird ToastAndroid von react-native umschlossen. Burnt.alert() greift unter Android auf Burnt.toast() zurück. Dies kann sich in einer zukünftigen Version ändern.
Im Web gibt es sonner von Emil Kowalski.
Burnt funktioniert sowohl mit der alten als auch mit der neuen Architektur. Dank des neuen Modulsystems von Expo basiert es auf JSI.
toast , der native Komponenten unter der Haube verwendet, anstatt React State mit JS-basierter Benutzeroberfläche zu verwenden.alert -Popups im Stil des iOS App StoreDas Anzeigen von Toasts über Modals war in React Native schon immer ein Problem. Mit Burnt funktioniert das sofort.
import * as Burnt from "burnt" ;
Burnt . toast ( {
title : "Burnt installed." ,
preset : "done" ,
message : "See your downloads." ,
} ) ; Sie können auch Burnt.alert() und Burnt.dismissAllAlerts() verwenden.
yarn add burntBurnt erfordert wahrscheinlich Expo SDK 46+.
npx expo install burnt expo-build-properties Fügen Sie das expo-build-properties Plugin zu Ihrem app.json / app.config.js hinzu und legen Sie das Bereitstellungsziel auf 13.0 (oder höher) fest:
export default {
plugins : [
[
"expo-build-properties" ,
{
ios : {
deploymentTarget : "13.0" ,
} ,
} ,
] ,
] ,
} ;Anschließend müssen Sie Ihren Entwicklungsclient neu erstellen. Burnt funktioniert in Expo Go nicht.
npx expo prebuild --clean
npx expo run:iosDas Konfigurations-Plugin stellt sicher, dass Ihre iOS-App mindestens iOS 13 als Bereitstellungsziel hat, was für Burnt (sowie Expo SDK 47+) erforderlich ist.
Um die Webunterstützung zu aktivieren, müssen Sie den <Toaster /> zum Stammverzeichnis Ihrer App hinzufügen. Wenn Sie Next.js verwenden, fügen Sie dies Ihrer _app.tsx Komponente hinzu.
// _app.tsx
import { Toaster } from "burnt/web" ;
function MyApp ( { Component , pageProps } ) {
return (
< >
< Component { ... pageProps } / >
< Toaster position = 'bottom-right' / >
< / >
) ;
} Wenn Sie Next.js verwenden, fügen Sie burnt zu Ihren transpilePackages in next.config.js hinzu.
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages : [
// Your other packages here
"burnt"
]
} Um Ihren Toaster zu konfigurieren, lesen Sie bitte die sonner -Dokumente.
Wenn Sie Expo Web verwenden, müssen Sie Folgendes zu Ihrer Datei metro.config.js hinzufügen:
// 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 ../..
yarnBefolgen Sie unbedingt auch die Messe- und Webanweisungen.
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 / > ,
} ,
} ) ;alertDie API hat sich seit der Aufnahme dieses Videos geändert. Es verwendet jetzt Objektsyntax.
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 / > ,
} ,
} ) ;
} ;Im Web wird dadurch ein normaler Toast angezeigt. Dies kann sich in Zukunft ändern.
dismissAllAlerts()Tut, was Sie denken! In Zukunft werde ich asynchrone Spinner für Versprechen zulassen, und das wird dann nützlich sein.
yarn build
cd example
yarn
npx expo run:ios # do this again whenever you change native code Sie können die iOS-Dateien in ios/ bearbeiten und dann das JS entsprechend in src aktualisieren.
Besonderer Dank geht an Tomasz Sapeta für seine Hilfe auf dem Weg.
Mit Expo Modules ist dies so einfach zu erstellen, und das alles mit Swift – ohne Objective C. Es ist das erste Mal, dass ich Swift schreibe, und es war wirklich ein Kinderspiel.
