1. 개요
-
2. 요구 사항
앱 시작 시 캐시 확인 (로그인 여부 확인):
캐시에 로그인 정보가 있으면 바로 홈 화면으로 이동.
없다면 애플 로그인 화면으로 이동.
로그인 후 회원가입 여부 확인:
회원가입이 완료된 상태라면 홈으로 이동.
회원가입이 완료되지 않았다면 온보딩 화면으로 이동.
Java
복사
3. 캐시 확인 후 Navigate
4. AuthStackNavigator 수정하기
임시로 만든 AuthStackNavigator 의 흐름은 다음과 같았습니다.
회원가입 부터, 약관 동의 까지 모든 과정을 AuthStackNavigator가 처리하였습니다.
function AuthStackNavigator() {
return (
<BottomSheetModalProvider>
<Stack.Navigator>
<Stack.Screen
name={authNavigations.AUTH_HOME}
component={AuthHomeScreen}
options={{
headerShown: false,
headerTitle: ''
}}
/>
<Stack.Screen
name={authNavigations.SIGNUP}
component={SignupScreen} options={{
headerTitle: '회원가입',
headerBackTitleVisible: false
}}
/>
<Stack.Screen
name={authNavigations.TERM}
component={TermOfServiceScreen}
options={{
headerTitle: '서비스 이용약관'
}}/>
</Stack.Navigator>
</BottomSheetModalProvider>
)
}
Java
복사
하지만 수정 후 회원가입 여부에 따라 홈 화면 혹은 온보딩 화면으로 라우팅 하게 되었으므로 위 코드는 다음과 같이 수정되게 되었습니다.
<BottomSheetModalProvider>
<Stack.Navigator>
<Stack.Screen
name={authNavigations.AUTH_HOME}
component={AuthHomeScreen}
options={{
headerShown: false,
headerTitle: ''
}}
/>
/>
<Stack.Screen
name={authNavigations.MAIN_HOME}
component={MainTabNavigator}
options={{
headerShown: false,
headerTitle: ''
}}
/>
<Stack.Screen
name={authNavigations.ONBOARDING}
component={OnboardingStackNavigator}
options={{
headerShown: false,
headerTitle: ''
}}
/>
</Stack.Navigator>
</BottomSheetModalProvider>
)
}
Java
복사
특이한 점은 Navigator 를 등록한 점인데, 회원 가입 여부에 따라 다음과 같이 라우팅을 진행하기 때문입니다.
const isRegistered = false;
if (isRegistered) {
// 회원가입 되어있으면 피드 홈으로 이동
navigation.reset({
index: 0,
routes: [{ name: authNavigations.MAIN_HOME }],
});
} else {
// 회원가입 안되어있으면 온보딩 스크린으로 이동
navigation.reset({
index: 0,
routes: [{ name: authNavigations.ONBOARDING }],
});
}
Java
복사
5. 닉네임 입력
6. 아이디 입력
앞 전에 넘겨준 Nickname은 route 파라미터를 통해 받을 수 있습니다.
function OnboardingIdScreen({route, navigation}) {
Java
복사
