如何在 React 导航 5 堆栈导航器中按后退按钮导航到屏幕

Question

已经回答了许多类似的问题，但其中 none 使用了最新的 react-navigation 版本。我想在按下后退按钮时从 'Document' 屏幕转到 'Home' 屏幕。这是我尝试过的方法，但它不起作用。

<NavigationContainer>
  <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown : false }}>
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Camera" component={CameraScreen} />
    <Stack.Screen name="Document" component={Document} options={{
      headerLeft: (props) => (<HeaderBackButton {...props} onPress={() => props.navigation.navigate("Home")}/>)
    }} />
  </Stack.Navigator>
</NavigationContainer>

编辑以获得更多说明：我的应用程序以 'Home' 开头，然后转到 'Camera'，然后转到 'Document'。现在，我不想在 'Document' 时返回 'Camera'，而是在按下 phone 的后退按钮时直接返回 'Home'。根据文档，这是覆盖后退按钮的方法。

<Screen
  name="Home"
  component={HomeScreen}
  options={{
  headerLeft: (props) => (
   <HeaderBackButton
     {...props}
     onPress={() => {
       // Do something
     }}
   />
 ),

}}/>; 但是我不知道如何使用上面的代码去'Home'。所以我搜索了类似的问题，其中大部分都有 navigationOptions 和其他内容。我试着按照下面的问题回答。

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
}

} 是的，即使我使用 console.log

，后退按钮也没有响应

Answer 1

你试过了吗CommonActions.reset？

来自 doc 的类似内容：

import { CommonActions } from '@react-navigation/native';

// when you want to navigate to the Documents page, instead of doing
navigation.navigate({routeName: 'Documents'});

// you can try
navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Documents',
        params: { name: 'abc' },
      },
    ],
  })
);

因此，当您从 Documents 返回时，您将前往堆栈中的上一个屏幕：Home。

Answer 2

我不确定你的代码是如何工作的。

<它不起作用。> - 您可以向我们提供更多信息。

但下面值得一试。

import {CommonActions} from '@react-navigation/native';

props.navigation.dispatch(
   CommonActions.navigate({name: 'Home'}),
);

https://reactnavigation.org/docs/navigation-prop/#dispatch

Answer 3

我设法实现了我所需要的。我不得不覆盖 'Document' 中的物理后退按钮。

 useFocusEffect(
        useCallback(() => {
          const onBackPress = () => {
            navigation.pop(2); // remove two screens i.e. Document and Camera
            return true // disable normal behaviour
          };
          BackHandler.addEventListener('hardwareBackPress', onBackPress); // detect back button press
          return () =>
            BackHandler.removeEventListener('hardwareBackPress');
        }, [])
      );

Answer 4

您可以使用导航 'beforeRemove' 事件自定义后退按钮行为，该事件在卸载屏幕之前触发。

 useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', e => {
      e.preventDefault(); // Prevent default action
      unsubscribe() // Unsubscribe the event on first call to prevent infinite loop
      navigation.navigate('Home') // Navigate to your desired screen
    });
 }, [])

这种方法的优点是它会触发任何类型的后退导航，无论是 in-app 后退按钮还是设备后退 button/gesture。

Navigation Events Doc

如何在 React 导航 5 堆栈导航器中按后退按钮导航到屏幕

How to navigate to a screen on back button press in React navigation 5 stack navigator

react-native

react-navigation

react-navigation-stack