用于反应导航后退按钮的自定义后退导航

Question

如何在 ReactNavigation 中为标题后退箭头提供自定义导航？我希望标题中的后退箭头导航到我定义的屏幕，而不是前一个屏幕。

谢谢。

Answer 1

你可以尝试两件事：

a) 在

headerMode: 'none'

中使用

sub-StackRouters

而不是根路由器（名为 RouterComponent）。理想情况下，您不必再执行任何操作，并且

sub-StackRouters

的标头将显示在根路由器的标头中。我想我记得不久前对我来说有类似的工作，但我已经有一段时间没有测试它了，我认为它不太可能仍然像这样工作，但你仍然可以测试。

b）这是我目前在不同情况下使用的。要手动包含后退按钮：

import { HeaderBackButton } from '@react-navigation/stack';

const navigationOptions = ({ navigation }) => ({
    headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />,
})

const RouterComponent = StackNavigator({
    Tabs: {
        screen: Tabs
    },
    Profile: {
        screen: ProfileStack,
        navigationOptions
    }
},{
    mode: 'modal',
    headerMode: 'none',
});

如果以上解决方案不起作用，

尝试将 navigationOptions 直接添加到 ProfileStack 定义中。

const ProfileStack = StackNavigator({
    ProfileHome: { 
      screen: ProfileHome, 
      navigationOptions: ({navigation}) => ({ //don't forget parentheses around the object notation
        title: 'Profile',
        headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />
      })
    },
    ProfileEdit: { screen: ProfileEdit }
  }

Answer 2

嗨，谁正在使用react-navigation 5.x，您可能无法使用

navigationOptions

进行导航。该选项已替换为

options

。

假设您在屏幕 -1 中，导航到屏幕 2，然后导航到屏幕 3。默认情况下，使用react-navigation您可以从screen-3导航到screen-2。但如果您想要自定义导航，即，如果您想从 screen-3 导航到 screen-1，请从上面的示例中说。

如果您想保留后退按钮的视图并仅覆盖 onPress 方法，您可以

import { HeaderBackButton } from '@react-navigation/stack'

并将该组件分配给

headerLeft

选项。

示例：

<RootStack.Screen
    name="dashboard"
    component={Dashboard}
    options={({navigation, route}) => ({
          headerLeft: (props) => (
            <HeaderBackButton
              {...props}
              onPress={() => navigation.navigate('Home')}
            />
          ),
     })}
  />

在上面的示例中，单击仪表板屏幕中的后退按钮会将您带到主屏幕。

享受并感谢 -苏克希斯

Answer 3

React Navigation 6.x 的答案如下：

使用

@react-navigation/elements

包中的 HeaderBackButton。

import { HeaderBackButton } from '@react-navigation/elements';

const Main = () => {
  const navigation = useNavigation();

  // handle header left button press and navigate to desired screen
  const handlePress = useCallback(
    () => navigation.navigate('to the screen you desire'),
    []
  );

  // create header left button
  const headerLeft = useCallback(
    () => <HeaderBackButton onPress={handlePress} />,
    [handlePress],
  );

  // add header left button to the header
  useEffect(() => {
    navigation.setOptions({
      headerLeft,
    });
  }, [navigation, headerLeft]);

  // return what you want to show
  return null
}

Answer 4

您还可以添加一个

beforeRemove

侦听器，用于监听当前屏幕即将被删除的情况

navigation.addListener('beforeRemove', (e) => {
  if (everyThingIsGoodAlready) {
    // If we don't need to do anything, then just go back as usual
    return;
  }

  // Prevent default behavior of leaving the screen
  e.preventDefault();

  // Add any custom actions we need to take. E.g:
  // const customAction = () => {...}
  // customAction();


  /* 
    If you are all good and you want to continue with closing, 
    then you can dispatch the action you blocked earlier with e.preventDefault() 

    This will continue the action that had triggered the removal of the screen
  */
  navigation.dispatch(e.data.action);

})

请参阅官方文档了解此方法的更多信息和限制：https://reactnavigation.org/docs/preventing-going-back/