burnt
0.12.2
ネイティブ要素を利用した React Native のクロスプラットフォーム トースト。
Android、iOS、Web のサポートが追加されました。
この Twitter スレッドを参照してください。
これは、一時的な UI を表示するためのtoastおよびalertメソッドを備えたライブラリです。
iOS では、 SPIndicatorとAlertKitをラップします。
Android では、 react-nativeからToastAndroidラップします。 Android ではBurnt.alert() Burnt.toast()にフォールバックします。これは将来のバージョンで変更される可能性があります。
Web では、Emil Kowalski によるsonnerがラップされています。
Burnt は古いアーキテクチャと新しいアーキテクチャの両方で動作します。 Expo の新しいモジュール システムのおかげで、JSI の上に構築されています。
toast 。alertポップアップ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 burntBurnt には 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+) に必要です。
Web サポートを有効にするには、アプリのルートに<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 を使用している場合は、 next.config.jsのtranspilePackagesにburntを追加します。
/** @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また、Expo の指示および Web の指示にも必ず従ってください。
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このビデオを録画してから 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 / > ,
} ,
} ) ;
} ;Web では、通常のトーストが表示されます。これは将来変更される可能性があります。
dismissAllAlerts()あなたが思っていることを実現します！将来的には、Promise に非同期スピナーを許可する予定です。その時には便利になるでしょう。
yarn build
cd example
yarn
npx expo run:ios # do this again whenever you change native code ios/で iOS ファイルを編集し、それに応じてsrcで JS を更新できます。
途中で支援を提供してくれた Tomasz Sapeta に特に感謝します。
Expo Modules のおかげで、これは非常に簡単に構築でき、Objective C を使わずにすべて Swift を使用して構築できました。Swift を書くのは初めてでしたが、本当に簡単でした。
