Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 |
Tags
- ec2
- jenkins
- webstorm
- NGINX
- vue
- 리다이렉션
- cicd
- ELB
- 깃
- javascript
- docker
- vue-template-compiler
- 100mb
- memory
- vue #vue.js #vue컴포넌트
- 용량
- webpack
- Styled Components
- 웹개발
- Git
- Vue.js
- vue template
- IDE
- CI/CD
- v-if
- v-show
- git commit
- typescript
- React-Natvie
- Pipeline
- Today
- 64
- Total
- 457,885
번데기 개발자의 메모장
React-Native : toast 메세지 구현하기 (react-native-easy-toast) 본문
웹 프론트엔드/React-Native
React-Native : toast 메세지 구현하기 (react-native-easy-toast)
번데기 개발자 2021. 6. 14. 02:15반응형
React Native를 사용하다 보면 Toast 메세지를 사용해야할 때가 있습니다.
Toast 메세지는 안드로이드 개발을 할 때 한번쯤은 접해봤을 텐데요
React-native에서도 쉽게 Toast 메세지를 사용할수 있는 라이브러리가 있습니다.
react-native-easy-toast 라는 라이브러리 인데요 이를 이용하면 쉽게 Toast 메세지를 구현할수 있습니다.
react-native-easy-toast 설치
아래와 같이 설치합니다.
npm i --save react-native-easy-toast
react-native-easy-toast 사용법
사용법은 무척 간단합니다.
요즘 Hooks를 쓰는 방법이 일반화되어있으니, React Hooks를 기준으로 설명드리겠습니다.
먼저 Toast에 대한 값을 저장할수 있는 Ref를 useRef를 통해서 만듭니다.
import Toast from 'react-native-easy-toast';
const App = () => {
const toastRef = useRef(); // toast ref 생성
}
이후에 Toast 컴포넌트를 생성하고 toastRef를 연결시켜 줍니다.
import Toast from 'react-native-easy-toast';
const App = () => {
const toastRef = useRef(); // toast ref 생성
return
(
<View>
<Toast ref={toastRef}
positionValue={windowHeight * 0.55}
fadeInDuration={200}
fadeOutDuration={1000}
style={{backgroundColor:'rgba(33, 87, 243, 0.5)'}}
/>
</View>
)
}
제가 자주 사용하는 주요 속성들은 다음과 같습니다.
- positionValue : 화면 하단에서부터 지정된 위치값에 Toast 메세지를 표시하여 줍니다.
- fadeInDuration : Toast메세지가 화면에서 그려질때까지 fadeIn 애니메이션에 대한 총 시간 (ms)
- fadeOutDuration : Toast메세지가 화면에서 사라질때까지 fadeOut 애니메이션에 대한 총 시간 (ms)
이후 TouchableOpacity와 같은 Button의 onClick이벤트를 사용해서 Toast메세지를 그려주면 됩니다.
import Toast from 'react-native-easy-toast';
const App = () => {
const toastRef = useRef(); // toast ref 생성
// Toast 메세지 출력
const showCopyToast = useCallback(() => {
toastRef.current.show('주소가 복사되었습니다.');
}, []);
return
(
<View>
<TouchableOpacity style={styles.storeAddressCopyTouch} onPress={showCopyToast}>
<Image style={styles.storeAddressCopyImage} source={require('../assets/ic_copy.png')}></Image>
</TouchableOpacity>
<Toast ref={toastRef}
positionValue={windowHeight * 0.55}
fadeInDuration={200}
fadeOutDuration={1000}
style={{backgroundColor:'rgba(33, 87, 243, 0.5)'}}
/>
</View>
)
}
위 영상은 제가 진행하고 있는 프로젝트인데요, 토스트 메세지가 잘 출력되는것을 확인하실수 있습니다. :)
참고
리엑트 네이티브 토스트 npm
반응형
'웹 프론트엔드 > React-Native' 카테고리의 다른 글
React Native : 텍스트가 넘칠때 사용하면 좋은 flexShrink (0) | 2021.12.23 |
---|---|
React Native: IOS 14에서 이미지 리소스 패치 안되는 문제 해결 (0) | 2021.12.14 |
React-Native : splash 화면 적용하기 (2) | 2021.05.25 |
React Native : AsyncStorage 쉽게 사용해보기. (0) | 2020.08.23 |
React-Native : 버튼, TextInput 등에 box-shadow 주는 방법 (0) | 2020.07.21 |
0 Comments