[React Native] 로그인 Flow - 자동 로그인, Intro 페이지, 권한 페이지, Launcher, 앱 로딩
Nadan Dev Blog
로그인 Flow - 자동 로그인, Intro 페이지, 권한 페이지, Launcher, 앱 로딩
1) 자동 로그인
AuthContext
const tryLocalSignin = dispatch => async () => {
const token = await AsyncStorage.getItem('token');
if (token) {
dispatch({ type: 'signin', payload: token });
navigate('TrackList');
} else {
navigate('loginFlow')
}
};
...
export const { Provider, Context } = createDataContext(
authReducer,
{ signin, signup, signout, clearErrorMessage, tryLoalSignin },
{ token: null, errorMessage: '' }
)
SignUpScreen
import React, { useContext, useEffect } from 'react';
...
const SignUpScreen = ({ navigation }) => {
const { state, signup, clearErrorMessage, tryLoalSignin } = useContext(AuthContext);
useEffect(() => {
tryLoalSignin();
}, [])
...
}
2) Launcher Loading
-> 예제 변경
App.js
import LoadingScreen from './src/screens/LoadingScreen';
const switchNavigator = createSwitchNavigator({
loading: LoadingScreen,
loginFlow: createStackNavigator({
SignUp: SignUpScreen,
SignIn: SignInScreen
}),
mainFlow: createBottomTabNavigator({
trackListFlow: createStackNavigator({
TrackList: TrackListScreen,
TrackDetail: TrackDetailScreen
}),
TrackCreate: TrackCreateScreen,
Account: AccountScreen
})
});
LoadingScreen.js
import React, { useContext, useEffect } from 'react';
import { Context as AuthContext } from '../context/AuthContext';
const LoadingScreen = () => {
const { tryLoalSignin } = useContext(AuthContext);
useEffect(() => {
tryLoalSignin();
}, []);
return null;
};
export default LoadingScreen;