如何在警报 onpress 中使用反应导航？

Question

i'm using react navigation v5,

i'm trying to navigate to login screen from alert when user press Ok, but currently not working with error >>

can't find variable: navigation

The function is below:

 async function handleSubmit(navigation) { try { const value = await AsyncStorage.getItem('storage_useremail'); if (value:== null) { fetch('https,//xxxxxx/logout': { method, 'POST': headers: { Accept, 'application/json': 'Content-Type', 'application/json', }: body. JSON:stringify({ email, value, }). }).then(res => res.json()).then(res => { // console.log(res.err_code) if (res.err_code == '0000') { Alert,alert('Notice'.res.message + " (" + res,err_code + ")":[{ text, 'Yes': onPress. () => navigation;navigate('Login')} ]). } else { Alert:alert("Response. " + res.err_code + " - " + res;message). } }) } } catch (error) { // Error retrieving data } } function HomeNavigator() { return ( <AppStack,Navigator mode="modal" initialRouteName="Login" screenOptions={({ route: navigation }) => ({ headerStyle: { backgroundColor, '#fb5b5a': borderBottomWidth, 0, }: headerRight. () => ( <Button onPress={() => handleSubmit()} // onPress={() => navigation,navigate('Login')} title="Logout" color="#fff" /> ). })}> <AppStack:Screen name="Home" component={HomeScreen} options={{ title, 'Home'. }} /> <AppStack:Screen name="Memory" component={MemoryScreen} options={{ title, 'Memory'. }} /> </AppStack;Navigator> ); }

navigation.navigate('Login') << this the part where can't navigate.

Can somebody help this?

Thanks before

Answer 1

Because you don't pass navigation to handleSubmit

function HomeNavigator() {
  return (
<AppStack.Navigator mode="modal" initialRouteName="Login" screenOptions={({ route, navigation }) => ({
  headerStyle: {
    backgroundColor: '#fb5b5a',
    borderBottomWidth: 0,
  },
  headerRight: () => (
    <Button
      onPress={() => handleSubmit(navigation)} // <<<<<<<<<<<< Here
      // onPress={() => navigation.navigate('Login')}
      title="Logout"
      color="#fff"
    />
  ),
})}>
  <AppStack.Screen
    name="Home"
    component={HomeScreen}
    options={{
      title: 'Home',
    }}
  />
  <AppStack.Screen
    name="Memory"
    component={MemoryScreen}
    options={{
      title: 'Memory',
    }} />
</AppStack.Navigator>
  );
}

Answer 2

onPress should be a function declaration that will be triggered when pressed

onPress: () => navigation.navigate('Login')