burnt
0.12.2
Кроссплатформенные всплывающие уведомления для React Native на основе нативных элементов.
Теперь с Android, iOS и веб-поддержкой.
Посмотрите эту ветку в Твиттере.
Это библиотека с методом toast и alert для отображения эфемерного пользовательского интерфейса.
В iOS он оборачивает SPIndicator и AlertKit .
На Android он оборачивает ToastAndroid из react-native . Burnt.alert() заменяется Burnt.toast() на Android. Это может измениться в будущей версии.
В Интернете он представляет собой sonner произведения Эмиля Ковальского.
Burnt работает как со старой, так и с новой архитектурой. Он построен на базе JSI благодаря новой системе модулей Expo.
toast , которое использует собственные компоненты вместо использования состояния React с пользовательским интерфейсом на основе JS.alert в стиле iOS App StoreОтображение всплывающих уведомлений поверх модальных окон всегда было проблемой в 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+).
Чтобы включить веб-поддержку, вам необходимо добавить <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 в transpilePackages в next.config.js .
/** @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 / > ,
} ,
} ) ;alertAPI изменился с момента записи этого видео. Теперь он использует объектный синтаксис.
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/ , а затем соответствующим образом обновлять JS в src .
Особая благодарность Томашу Сапете за помощь на этом пути.
Благодаря Expo Modules это было так легко построить, и все это с помощью Swift – без Objective C. Я впервые пишу Swift, и это было действительно легко.
