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。这是我第一次编写 Swift，这确实是一件轻而易举的事情。
