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

【问题标题】：how to use react navigation inside alert onpress?如何在警报 onpress 中使用反应导航？
【发布时间】：2020-06-05 15:37:56
【问题描述】：

我正在使用反应导航 v5，

当用户按确定时，我正在尝试从警报导航到登录屏幕，但目前没有出现错误>>

找不到变量：导航

函数如下：

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')

有人可以帮忙吗？

感谢之前

【问题讨论】：

你在哪里使用handleSubmit 并将navigation传递给它？
嗨，我把标题放在右边。让我更新上面的代码。谢谢
您没有将navigation 传递给handleSubmit 函数。您可以从 ``headerRight: (navigation) ....` 获取它，然后将其传递给 handleSubmit(navigation)

标签： javascript react-native expo react-navigation react-navigation-v5

【解决方案1】：

因为你没有将导航传递给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>
  );
}

【讨论】：

【解决方案2】：

onPress 应该是按下时会触发的函数声明

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

【讨论】：

如果更改为：Alert.alert('Notice',res.message + " (" + res.err_code + ")",[{ text: 'Yes', onPress: () =>导航.navigate('登录')} ]); [未处理的承诺拒绝：TypeError：未定义不是对象（评估'navigation.navigate'）]