[리액트 네이티브] 온보딩 화면_📱 / AsyncStorage, PagerView, Expo

 

[React Native_ Onboarding Screen]

 

온보딩 화면 만드는 방법에 대해 알아보자

 

---

<STUDY>

 

❓ 온보딩 화면 (Onboarding Screen)

 

   💡 온보딩 화면이란 어플을 처음 설치한 후 실행했을 때 한 번만 나오는 화면을 말한다.

 

   💡 어플 사용법 등의 내용이 간단하게 들어간다.

 

   💡 어플을 처음 실행했는지 여부를 state에 업데이트하고 Local Storage에 저장한다.

 

 

1. 라이브러리 설치

yarn add @react-native-async-storage/async-storage
yarn add react-native-pager-view

or

npm install @react-native-async-storage/async-storage
npm install react-native-pager-view

 

   💡 @react-native-async-storage/async-storage : 어플 실행 여부 저장 라이브러리 (local)

      ❕기존 [@react-native-community/async-storage] 에서 변경되었으니 유의!

      ❕ 이번엔 AsyncStorage를 사용하였으나 다른 라이브러리도 있으니 참고해 주세요

 

   💡 react-native-pager-view : 온보딩 화면 컴포넌트

 

 

2. 데이터 Local storage에 저장 (AsyncStorage)

import React, { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

``````

export default function Ap() {
  const [firstLaunch, setFirstLaunch] = useState(null);

  useEffect(() => {
    AsyncStorage.getItem('launched').then(value => {
      if (value == null) {
        AsyncStorage.setItem('launched', 'true');
        setFirstLaunch(true);
      } else {
        setFirstLaunch(false);
      }
    });
  }, []);
   
   return (
   //
   )
 }

 

   💡 AsyncStorage.getItem : 'launched' 불러오기

      ❕ null인 경우 가져올 item이 없다는 뜻이므로 처음 실행한 것으로 판단

 

   💡 AwyncStorage.setItem('launched', 'true') : Local Storage에 'launched' : 'true' 로 저장

      ❕ 두 번째부터 어플을 실행했을 때 위 경우가 null이 아닌 ture로 값이 나타가게 됨

 

   💡 setFirstlaunch : null인 경우 처음 실행한 것이므로 true, value가 존재하는 경우 처음이 아니므로 false로 업데이트

 

 

3. 온보딩 화면 페이지 생성 (PagerView)

import React from 'react';
import PagerView from 'react-native-pager-view';

``````

export default function OnBoarding(props) {
  return (
    <View style={{ flex: 1 }}>
      <PagerView 
      	style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} 
        initialPage={0}
      >
        <View key="1" >
          // page component
        </View>

        <View key="2" >
          // page component
        </View>

        <View key="3" >
          // page component
        </View>
      </PagerView>
    </View>
  )
};

 

  💡  PagerView : 콘텐츠 들을 스크롤 하여 볼 수 있음

      ❕ initialPage : PagerView 하위 컴포넌트 (첫 번째 : 0)을 기준으로 맨 처음 보여줄 페이지(컴포넌트) 지정

 

 

4. 온보딩 화면 - 페이지 이동 버튼을 넣고 싶은 경우 

import React, { useRef } from 'react';
import PagerView from 'react-native-pager-view';

``````

export default function OnBoarding(props) {
  const pagerRef = useRef(null);

  // Page Button 이벤트
  const handleClickPage = (pageNumber) => { pagerRef.current.setPage(pageNumber) };
  
  return (
    <View style={{ flex: 1 }}>
      <PagerView 
      	style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} 
        initialPage={0}
        ref={pagerRef} //pageRef로 현재 페이지 번호 가져오기
      >
        <View key="1" >
          // page component
        </View>

        <View key="2" >  // 여기!
          <PageComponent
            handleBack={() => handleClickPage(0) /> // 이전 페이지
            handleNext={() => handleClickPage(2) /> // 다음 페이지
        </View>

        <View key="3" >
          // page component
        </View>
      </PagerView>
    </View>
  )
};

 

  💡 pageRef.current.setPage() 를 이용하여 현재 보여지는 페이지를 업데이트

      ❕ 각 컴포넌트에서 props로 전달받아 onPress 이벤트로 넣어주면 된다.

 

  💡 skip 버튼 : navigation 을 이용하여 navigation.replace('첫 화면') 을 전달

 

 

5. App.jsx에서 렌더링

import React, { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

``````

export default function Ap() {
  const [firstLaunch, setFirstLaunch] = useState(null);

  useEffect(() => {
    AsyncStorage.getItem('launched').then(value => {
      if (value == null) {
        AsyncStorage.setItem('launched', 'true');
        setFirstLaunch(true);
      } else {
        setFirstLaunch(false);
      }
    });
  }, []);
 
  // 여기! 
  if (firstLaunch == null) {
    return null
  } else if (firstLaunch == true) { // 어플 실행이 처음인 경우 (onboarding)
    return (
      <NavigationContainer>
        <StatusBar style='auto' />
        <Stack.Navigator>
          <Stack.Screen
            name='Onboarding'
            component={OnBoarding}
            options={{ headerShown: false }}
          />
          <Stack.Screen
            name='Main'
            component={Main}
          />
        </Stack.Navigator>
      </NavigationContainer >
    )
  } else { // 어플 실행이 처음이 아닌 경우 (no onboarding)
    return (
      <NavigationContainer>
        <StatusBar style='auto' />
        <Stack.Navigator>
          <Stack.Screen
            name='Main'
            component={Main}
          />
        </Stack.Navigator>
      </NavigationContainer >
    )
  };

 

 

---

 

 

내가 보려고 정리하는 리액트네이티브🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview