react native toast

Реагировать на местный тост

Toast Library для React-National, построенная на реагировании. Он поддерживает такие функции, как множество тостов, обработка клавиатуры, смахивание до увольнения, позиционные тосты и JS обещания. Он работает на iOS, Android и Web.

Github.mp4

Почему?

Я знаю, о чем вы думаете ( Боже, другая библиотека тостов? ). Поверьте мне здесь, это последняя библиотека тостов, которая вам понадобится. Я построил эту библиотеку, чтобы удовлетворить мои конкретные потребности в приложении, и решил открыть ее после того, как понял, что это действительно первоклассная библиотека для тостов. Просто попробуй.

Функции

• Многочисленные тосты, несколько вариантов . Хотите тост сверху, снизу, разные цвета или разные типы одновременно? Понятно.

• Обработка клавиатуры (как iOS, так и Android). Переместите их тосты в сторону и в представление, когда пользователь открывает клавиатуру

• Пройдите, чтобы увольнять

• Позиционные тосты (вверху и внизу)

• Настраиваемый (пользовательские стили, размеры, продолжительность и даже создайте свой собственный компонент, который будет использоваться в тосте)

• Добавьте поддержку обещаний <- действительно! Вызовите toast.promise(my_promise) и наблюдайте, как React-Contive работает, работая в магии, автоматически обновляя тост с помощью пользовательского сообщения об успехе-или сообщением об ошибке в отказе.

• Работает в Интернете

• Поддержка местных модалов

• Обратные вызовы для Onpress, Onshow и Onhide

Документация

Просмотреть полную документацию здесь

Начиная

Установка

 пряжа добавить @backpackapp-io/react-native-goast# ornpm i @backpackapp-io/react-national-тоаст

Зависимости от сверстников

Установка и ссылка реагируют, реатимированные, реагируемые по-ненужные, безопасные в районе, и реагируют-и-и-гест-жесты

 пряжа добавить реагируемые, реатимируемые реагируемые, инативно-защищенные в районе-контекст-контекст-наизвезд

Убедитесь, что вы следите за установкой каждого пакета

Использование выставки?

 NPX Expo Установка React-Native-Reanimated React-Native-Safe-Context-Context React-C-и-Гест-Хэндлер

Круто, что теперь?

Оберните свое приложение <GestureHandlerRootView /> и <SafeAreaProvider /> и добавьте компонент <Toasts /> в корень вашего приложения.

Позвоните toast("My Toast Message") всякий раз, когда вы готовы из любого места в вашем приложении.

 Import {view, styleSheet, text} от 'react-native'; import {gestureHandlerRootView} из 'react-inative-gesture-handler'; import {safeareaprovider} из 'react-intive-safe-context'; import {toast , Toasts} из '@Backpackapp-IO/React-Con-woast'; import {useEffect} из 'React'; export function function () {
  Использовать effect (() => {toast ('hello');
  }, []);

  return (<safeareaProvider> <gestureHandlerRootView style = {styles.container}> <view> {/*остальное приложение*/} </view> <toasts/> {/*<----- Добавить здесь*/} </GestureHandlerRootView> </safeareaProvider>
  );} const styles = styleSheet.create ({
  Контейнер: {Flex: 1, Alignitems: 'Center', usiifyContent: 'Center',
  },});

Пример

Обычный тост

 тост («Это мой первый тост», {
  Продолжительность: 3000,});

Обещаю тост

 const sleep = new Promplow ((Resolve, dize) => {
  setTimeout (() => {if (math.random ()> 0.5) {Resolve ({username: 'nick',});} else {decuct ('username не определен');}
  }, 2500);}); toast.promise (
  спать,
  {загрузка: 'загрузка ...', успех: (data: any) => 'добро пожаловать' + data.username, ошибка: (err) => err.tostring (),
  },
  {позиция: toastposition.bottom,
  });

Загрузка тоста

 const id = toast.loading ('Я загружаю. Увольняю меня всякий раз, когда ...'); settimeout (() => {
  toast.dismiss (id);}, 3000);

Успех тост

 toast.success ('успех!', {
  Ширина: 300});

Ошибка тоста

 Toast.Error («Вау. Это отстой!»);