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

Question

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

谢谢。

Answer 1

您可以尝试2件事：

a）headerMode: 'none'在您的sub-StackRouters而不是您的根路由器（名为RouterComponent）中使用。理想情况下，您无需再执行任何操作，并且的标头sub-StackRouters将显示在根路由器的标头中。我想我记得有一段时间类似的东西对我有用，但是我已经有一段时间没有对其进行测试了，我认为它仍然不可能像这样工作，但是您仍然可以进行测试。

b）这是我目前在其他情况下使用的。手动包括后退按钮：

import { HeaderBackButton } from 'react-navigation';

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。

说你在 screen -1 并导航到 screen-2，然后导航到 screen-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')}
            />
          ),
     })}
  />

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

享受和感谢-Sukshith