온보딩 슬라이더

부가 설명
Tags
onboarding

온보딩이란?

OnBoarding : 조직내 새로 합류한 사람이 빠르게 조직의 문화를 익히고 적응하도록 돕는 과정

react-native-onboarding-swiper

설치

#패키지 추가
$ yarn add react-native-onboarding-swiper

사용예시

  • 기본 사용 틀
커스텀 컴포넌트를 하나도 쓰지 않고 기본적인 온보딩 틀만 잡으면 아래와 같다.
여기서 skip, next, done 버튼 컴포넌트를 별도로 만들어 적용할 수도 있다.
  • OnboardingScreen.js
...
import {Image} from 'react-native'
import Onboarding from 'react-native-onboarding-swiper'
...

//보통 네비게이션을 필수적으로 사용하므로, 온보딩을 읽은 후 해당 네비게이터 스크린으로 이동시키고자 navigation 프롭을 받음.
const OnboardingScreen = ({navigation}) => {
	return(
		<Onboarding
			onSkip = {() => navigation.replace('PMain')}
			onDone = {() => navigation.replace('PMain')}
		  pages={[
		    {
		      backgroundColor: '#a6e4d0',
		      image: <Image source={require('./images/circle.png')} />,
		      title: 'Onboarding',
		      subtitle: 'Done with React Native Onboarding Swiper',
		    },
		    {
		      backgroundColor: '#fdeb93',
		      image: <Image source={require('./images/circle.png')} />,
		      title: 'Onboarding',
		      subtitle: 'Done with React Native Onboarding Swiper',
		    },
				{
		      backgroundColor: '#fff',
		      image: <Image source={require('./images/circle.png')} />,
		      title: 'Onboarding',
		      subtitle: 'Done with React Native Onboarding Swiper',
		    },
		  ]}
		/>
	);
};
 

커스텀 컴포넌트 적용 예시 (Done 버튼 변경)

  • OnboardingScreen.js
import React from 'react'
import { View, Image, Button, TouchableOpacity, Text } from 'react-native'
import Onboarding from 'react-native-onboarding-swiper'

const Dots = ({ selected }) => {
    let backgroundColor;
    backgtoundColor = selected ? 'rgba(0, 0, 0, 0.8)' : 'rgba(0, 0, 0, 0.3)';
    return (
        <View style={{ width: 6, height: 6, marginHorizontal: 3, backgroundColor }} />
    );
}

const Done = ({ ...props }) => {
    return(
    <TouchableOpacity
        style={{ marginHorizontal: 8 }}
        {...props} //안받아오면 버튼 동작 안함.
    >
        <Text>Done</Text>
    </TouchableOpacity>
    );
}

//보통 네비게이션을 필수적으로 사용하므로, 온보딩을 읽은 후 해당 네비게이터 스크린으로 이동시키고자 navigation 프롭을 받음.
export default function OnboardingScreen({ navigation }){
    return (
        <Onboarding
            DoneButtonComponent={Done}
            onSkip={() => navigation.replace('PMain')}
            onDone={() => navigation.replace('PMain')}
            pages={[
                {
                    backgroundColor: '#a6e4d0',
                    image: <Image source={require('../Assets/Onboarding1.png')} />,
                    title: 'Onboarding',
                    subtitle: 'Done with React Native Onboarding Swiper',
                },
                {
                    backgroundColor: '#fdeb93',
                    image: <Image source={require('../Assets/Onboarding2.png')} />,
                    title: 'Onboarding',
                    subtitle: 'Done with React Native Onboarding Swiper',
                },
                {
                    backgroundColor: '#fff',
                    image: <Image source={require('../Assets/Onboarding3.png')} />,
                    title: 'Onboarding',
                    subtitle: 'Done with React Native Onboarding Swiper',
                },
            ]}
        />
    );
};
 

AsyncStorage로 skip 여부 저장하기

  • App.js
...
import {ustState, AsyncStorage} from 'react-native'
//import {AsyncStorage} from '@react-native-community/async-storage';
...

const App = () => {
	const [isSkipped, setIsSkipped] = useState(null);

	//최초 실행 시에만 띄우도록 훅 걸어줌
	useEffect(() => {
		AsyncStorage.getItem('isSkipped').then(value => {
			if(value == null){
				AsyncStorage.setItem('isSkipped', 'true');
				setIsSkipped(true);
			} else {
				setIsSkipped(false);
			}
		});
	}, []);

	if(isSkipped == null){ //아직 값이 셋팅 되지 않은 경우는 null 반환
		return null;
	} else if(isSkipped == false){ //상태값이 false라면 온보딩이 첫화면인 스택네비게이터 반환
		return(
			<NavigationContainer>
				<AppStack.Navigator headerMode="none">
					<AppStack.Screen name="Onboarding" component={OnboardingScreen} />
						<AppStack.Screen name="Login" component={LoginScreen} />
						...
				</AppStack.Navigator>
			</NavigationContainer>
		);
	};
} else { //상태값이 true라면 온보딩 화면 없는 스택네비게이터 반환
	return(
			<NavigationContainer>
				<AppStack.Navigator headerMode="none">
						<AppStack.Screen name="Login" component={LoginScreen} />
						...
				</AppStack.Navigator>
			</NavigationContainer>
	)
}

...