react native toast

기본 토스트를 반응합니다

React-Hot-toast를 기반으로 한 반응-네이티브를위한 토스트 라이브러리. 다중 토스트, 키보드 처리, 스 와이프, 해고, 위치 토스트 및 JS 약속과 같은 기능을 지원합니다. iOS, Android 및 웹에서 실행됩니다.

github.mp4

왜?

나는 당신이 무엇을 생각하고 있는지 알고 있습니다 ( Jeez, 다른 토스트 라이브러리 ). 나를 믿으십시오. 이것은 당신이 필요로하는 마지막 토스트 라이브러리입니다. 나는 특정 앱 요구를 충족시키기 위해이 라이브러리를 만들었고 그것이 최고의 토스트 라이브러리라는 사실을 깨닫고 오픈 소스로 결정했습니다. 그냥 시도해보십시오.

특징

• 다중 토스트, 여러 옵션 . 상단, 하단, 다른 색상 또는 다른 유형에 동시에 토스트를 원하십니까? 알았어요.

• 키보드 처리 (iOS 및 Android). 사용자가 키보드를 열면 토스트를 방해하고 볼 수 있습니다.

• 무시하기 위해 스 와이프하십시오

• 위치 토스트 (상단 및 하단)

• 사용자 정의 가능 (사용자 정의 스타일, 치수, 지속 시간 및 토스트에 사용할 자신의 구성 요소를 만듭니다)

• 약속 에 대한 지원을 추가하십시오 <- 정말! toast.promise(my_promise) Call하고 Real Real-Native-Toast가 마술을 작동시켜 성공에 대한 사용자 정의 메시지로 토스트를 자동으로 업데이트하거나 거부에 대한 오류 메시지를 자동으로 업데이트하십시오.

• 웹 에서 실행됩니다

• 네이티브 모달에 대한 지원

• Onpress, Onshow 및 Onhide의 콜백

선적 서류 비치

여기에서 전체 문서를보십시오

시작하기

설치

 원사 추가 @backpackapp-io/react-native-toast# ornpm i @backpackapp-io/react-native-toast

피어 의존성

반응-신고리, 반응 신용-안전 영역 텍스트 및 반응-신용-제스처 핸들러를 설치하고 연결합니다

 원사는 반응-출현-시민 반응 반응-신도--컨텍스트 반응-신용-그스 테스처 핸들러를 추가한다

각 패키지의 설치를 따르십시오

엑스포 사용?

 NPX Expo 설치 반응-신경-시민 반응-신용-안전 영역-컨텍스트 반응-신용-제스처 핸들러

쿨, 이제 뭐?

<GestureHandlerRootView /> 및 <SafeAreaProvider /> 로 앱을 감고 <Toasts /> 구성 요소를 앱의 루트에 추가하십시오.

앱의 어느 곳 에서나 준비 될 때마다 toast("My Toast Message") 에게 전화하십시오.

 'React-Native'에서 {view, stylesheet, text}; 'reft-native-gesture handler'에서 {gesturehandlerrootview} import {gesturehandlerrootview}; import {safeareaprovider} 'react-native-safe-area-context'; , 토스트}에서 '@backpackapp-io/react-native-toast'; import {useeffect} 'react'; 내보내기 기본 함수 app () {
  useeffect (() => {토스트 ( 'hello');
  }, []);

  return (<afeareaprovider> <gesturehandlerrootview style = {styles.container}> <liew> {/*나머지 앱*/} </view> <toasts/> {/*<---- 여기에 추가*/} </gesturehandlerrootview> </safeareaprovider>
  );} const Styles = Stylesheet.create ({{
  컨테이너 : {flex : 1, alignitems : 'center', restifycontent : 'center',
  },});

예

일반 토스트

 토스트 ( "이것은 나의 첫 번째 토스트입니다", {
  지속 시간 : 3000,});

토스트 약속

 const sleep = 새로운 약속 ((결의, 거부) => {
  settimeout (() => {if (math.random ()> 0.5) {resolve ({username : 'nick',});} else {reject ( 'username is undefined');}
  }, 2500);}); 토스트.
  잠,
  {로드 : '로딩 ...', 성공 : (데이터 : any) => 'welcome' + data.username, 오류 : (err) => err.toString (),
  },
  {위치 : ToastPosition.bottom,
  });

로딩 토스트

 const id = toast.loading ( '나는 로딩 중입니다. 언제든 ...'); settimeout (() => {
  Toast.dismiss (id);}, 3000);

성공 토스트

 토스트 .Success ( '성공!', {
  너비 : 300});

오류 토스트

 Toast.error ( '와우. 빨려!');