我有一個應用程式，我可以在其中登錄/注冊并可以注銷/注銷，我正在使用react navigation v6相同的應用程式，并且我可以登錄，但是當我注銷時它不會立即將我注銷，我會到hot restart應用程式，然后我已經注銷了，它不會在沒有熱重啟的情況下注銷我，而且，在注銷時，我收到錯誤/警告：
error：
The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.
Do you have a screen named 'Login'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
This is a development-only warning and won't be shown in production.
下面是我正在使用的代碼：
背景關系檔案：
const initialState = {
user: null,
loading: false,
};
const UserContext = createContext(initialState);
export const UserProvider = ({children}) => {
const [globalState, dispatch] = useReducer(UserReducer, initialState);
return (
<UserContext.Provider value={{
user: globalState.user,
loading: globalState.loading,
dispatch,
}} >
{children}
</UserContext.Provider>
);
};
export default function() {
return useContext(UserContext);
}
導航螢屏：
const Navigation = () => {
const {user, dispatch, loading} = useAuth();
let navigationRef;
useEffect(() => {
setTimeout(() => {
navigationRef = createNavigationContainerRef(); // To avoid getting error: navigator is undefined while the component is mounting...
}, 500);
checkUserLoggedInStatus(dispatch, navigationRef);
}, [dispatch]);
return loading ? (
<LoadingScreen />
) : (
<Stack.Navigator screenOptions={{headerShown: false}}>
{!user ? (
<Stack.Group>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
</Stack.Group>
) : (
<Stack.Group>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Group>
)}
</Stack.Navigator>
);
};
checkUserLoggedInStatus, login&logout效用函式：
export const login = (otp, userId, dispatch) => {
dispatch(SET_LOADING(true));
fetch(`${API_URL}/auth/login/`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({...}),
})
.then(response => response.json())
.then(data => {
if (data.error) {
console.log('[ERROR] While trying to login: ', data.error);
dispatch(SET_LOADING(false));
}
if (data.type === 'success') {
AsyncStorage.setItem('token', data.data.token)
.then(response => console.log(response))
.catch(err => console.log(err));
const userDetails = data.data.user;
dispatch(SET_USER_DETAILS(userDetails));
dispatch(SET_LOADING(false));
}
})
.catch(error => {
console.log('[ERROR] While logging in: ' error.message);
dispatch(SET_LOADING(false));
});
};
export const checkUserLoggedInStatus = (dispatch, navigator) => {
dispatch(SET_LOADING(true));
AsyncStorage.getItem('token')
.then(token => {
if (token) {
fetch(`${API_URL}/user/`, {
method: 'GET',
headers: {...},
})
.then(response => response.json())
.then(data => {
if (data.type === 'success') {
const details = data.data.user;
dispatch(SET_USER_DETAILS(details));
dispatch(SET_LOADING(false));
}
if (data.error) {
console.log('[INFO] Your token expired.');
if (navigator.isReady()) {
navigator.navigate('Login');
}
}
})
.catch(error => {
console.log('[ERROR] While fetching profile: ' error.message);
dispatch(SET_LOADING(false));
});
} else {
dispatch(SET_LOADING(false));
}
})
.catch(error => {
console.log('[ERROR] While fetching token: ' error.message);
dispatch(SET_LOADING(false));
});
};
export const logout = async (dispatch, navigator) => {
dispatch(SET_LOADING(true));
await AsyncStorage.removeItem('token');
navigator.navigate('Login');
dispatch(SET_LOADING(false));
};
// HERE I LOGOUT FROM MY SETTINGS SCREEN (WHEN I'M AUTHENTICATED).
正如您所看到的錯誤（前幾行代碼），我無法從我的應用程式中正確導航/注銷。任何幫助將非常感激！
uj5u.com熱心網友回復：
根據外觀，在注銷操作中需要調整兩件事。
- 您正在從 AsyncStorage 中洗掉令牌，但您的
useAuth鉤子中仍然設定了一個用戶物件，它有條件地呈現包含登錄/注冊的堆疊組，或具有主頁/設定的堆疊組：
{!user ? (
<Stack.Group>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
</Stack.Group>
) : (
<Stack.Group>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Group>
)}
所以用戶不是虛假的，仍然會呈現主頁/設定，因此您不會導航回登錄。分派一個動作將其設定回 null，您將自動導航回登錄。
- 使用 react-navigation 時使用的典型注銷流程意味著當您執行注銷操作時，您實際上并不需要這樣做，
navigator.navigate('Login')因為該堆疊的默認路由將回傳到登錄（只需在導航器中設定它)，因為由于我上面提到的第一點，當前沒有渲染螢屏（有條件地渲染它們，螢屏在您導航的點實際上不存在），因此您可以安全地洗掉此行。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/403674.html
標籤：