React Native) 모달, Event, Splash 활용하기

React Native 앱 제작에 자주 활용되는 모달, Event, Splash 기능 활용 해보기

 

---

 

모달 만들기

모달은 컴포넌트를 만들어놓고 visible Props를 활용해서 보여주기/숨기기 해서 활용함

사용 예제)

<Modal
  visible={visible}
  transparent={true}
  animationType="fade"
  onRequestClose={onClose}>
  <Pressable onPress={onClose}>
    <View>
      <Pressable>
        <Icon (...) />
        <Text>(...)</Text>
      </Pressable>
    </View>
  </Pressable>
</Modal>

* Props 설명
- visible : 모달창 보여줄 지 결정하는 Props (true/false)
- transparent : 뒤에 배경 살짝 보이게 투명도 넣을지 말지
- animationType : 트랜지션 효과 지정 (slide - 아래에서 위로 슬라이드, fade - 서서히 나타나기, none - 아무효과 없음)
- onRequestClose : 안드로이드 뒤로가기 버튼 눌렀을 때 호출되는 함수

* iOS에서 모달 : ActionSheetIOS 함수로 대체함

---

 

Event 활용하기

- 사전준비 : EventEmitter3 설치

yarn add eventemitter3

- 활용 방법 : export 해서 공통 라이브러리 형태로 활용
  1. addListener로 이벤트 활용 영역에 이벤트들 등록해두기 (향후 removeListener로 등록한 이벤트 회수 필요)
  2. emit 호출하여 등록해둔 이벤트들 일괄 호출

- 활용 목적 : 현재 작업중이 아닌 여러 screen, component 등에서 데이터 최신화 등의 작업이 필요할 경우 이벤트 호출함

활용 예시 - lib/events.js)

import EventEmitter3 from 'eventemitter3';

const events = new EventEmitter3();

export default events;

활용 예시 - addListener 이벤트 등록)

useEffect(() => {
    events.addListener('refresh', refresh);
    return () => {
      events.removeListener('refresh', refresh);
    };
  }, [refresh]);

활용 예시 - emit 이벤트 호출)

const onSubmit = useCallback(async () => {
  (...)
  events.emit('refresh');
}, [...]);

---

 

Splash 화면 만들기

- Splash란?
: 앱을 구동한 후 필요한 로딩이 끝날 때까지 전체화면을 가리는 화면

라이브러리 설치)

yarn add react-native-splash-screen

* 안드로이드에서 Splash 적용 (iOS는 추후에 설명)
1. 화면 이미지 준비 : android/app/src/main/res 경로에 drawable 폴더에 위치
2. MainActivity.java 파일 내 코드 추가 (경로 : android/app/src/main/java/com/{프로젝트명(소문자)}/)

@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this);  // here
    super.onCreate(savedInstanceState);
}

3. launch_screen.xml 파일에 코드 추가 (경로 : android/app/src/main/res/layout)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="false"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="#6200EE"
    android:gravity="center_vertical"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/splash_icon" />
</RelativeLayout>

위와 같이 등록하면 시작하자마자 등록한 이미지 파일로 화면이 뜨고 닫히지 않음
* splash 화면 닫아주는 함수 호출 필요

import SplashScreen from 'react-native-splash-screen'
(...)

SplashScreen.hide();

최초 화면에서 호출해주면 Splash 이후 바로 최초 화면이 보임

splash 화면 예시