burnt
0.12.2
네이티브 요소로 구동되는 React Native용 크로스 플랫폼 토스트입니다.
이제 Android, iOS 및 웹 지원이 제공됩니다.
이 트위터 스레드를 참조하세요.
임시 UI를 표시하기 위한 toast 및 alert 메서드가 포함된 라이브러리입니다.
iOS에서는 SPIndicator 및 AlertKit 래핑합니다.
Android에서는 react-native 에서 ToastAndroid 래핑합니다. Burnt.alert() Android의 Burnt.toast() 로 대체됩니다. 이는 향후 버전에서 변경될 수 있습니다.
웹에서는 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 app.json / app.config.js 에 expo-build-properties 플러그인을 추가하고 배포 대상을 13.0 (또는 그 이상)으로 설정합니다.
export default {
plugins : [
[
"expo-build-properties" ,
{
ios : {
deploymentTarget : "13.0" ,
} ,
} ,
] ,
] ,
} ;그런 다음 개발 클라이언트를 다시 빌드해야 합니다. Burnt는 Expo Go에서 작동하지 않습니다.
npx expo prebuild --clean
npx expo run:ios구성 플러그인은 iOS 앱이 Burnt(및 Expo SDK 47+)에 필요한 배포 대상으로 최소한 iOS 13을 갖도록 보장합니다.
웹 지원을 활성화하려면 앱 루트에 <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또한 엑스포 지침과 웹 지침을 따르십시오.
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 / > ,
} ,
} ) ;
} ;웹에서는 일반 토스트 메시지가 표시됩니다. 이는 향후 변경될 수 있습니다.
dismissAllAlerts()당신이 생각하는 대로 작동합니다! 앞으로는 약속에 대해 비동기 스피너를 허용할 예정이며 그때 유용할 것입니다.
yarn build
cd example
yarn
npx expo run:ios # do this again whenever you change native code ios/ 에서 iOS 파일을 편집한 다음 src 에서 그에 따라 JS를 업데이트할 수 있습니다.
도중에 도움을 주신 Tomasz Sapeta에게 특별히 감사드립니다.
Expo 모듈을 사용하면 Objective C 없이 Swift를 사용하여 이를 매우 쉽게 구축할 수 있습니다. 처음으로 Swift를 작성했는데 정말 쉬웠습니다.
