reactjs - 用于重新导航后退按钮的自定义后退导航

Question

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

谢谢。

Answer 1

你可以尝试两件事:

a) 在您的子StackRouters中使用headerMode: 'none'而不是您的根路由器(名为RouterComponent)。理想情况下，您不必再执行任何操作，子 StackRouters 的 header 将显示在根路由器的 header 中。我想我记得不久前有类似的东西对我有用，但我已经有一段时间没有测试它了，我认为它不太可能仍然像这样工作，但你仍然可以测试。

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 }
  }