burnt
0.12.2
React Native 的跨平台 toast，由本機元素提供支援。
現在提供 Android、iOS 和 Web 支援。
請參閱此 Twitter 貼文。
這是一個帶有toast和alert方法的庫，用於顯示臨時 UI。
在 iOS 上，它包裝了SPIndicator和AlertKit 。
在 Android 上，它包裝了react-native中的ToastAndroid 。 Burnt.alert()在 Android 上回退到Burnt.toast() 。這可能會在未來版本中發生變化。
在網路上，它包含 Emil Kowalski 的sonner 。
Burnt 適用於新舊架構。由於採用 Expo 的新模組系統，它構建在 JSI 之上。
toast ，在底層使用本機元件，而不是使用 React 狀態和基於 JS 的 UI。alert彈出窗口在模態之上顯示 toast 一直是 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，請將burnt加入next.config.js中的transpilePackages中。
/** @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自從錄製該影片以來，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 / > ,
} ,
} ) ;
} ;在網路上，這將顯示常規的 toast。這在未來可能會改變。
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 讓建置變得如此容易，並且全部使用 Swift - 沒有 Objective C。
