reactnavigation 后退按钮的自定义后退导航 [英] Custom back navigation for reactnavigation back button

问题描述

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

How can I give a custom navigation to the header back arrow in ReactNavigation? I want the back arrow in the header to navigate to the screen I define and not to the previous screen.

谢谢.

推荐答案

你可以尝试两件事:

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

a) use headerMode: 'none' in your sub-StackRouters instead of your root router (named RouterComponent). Ideally you shouldn't have to do anything more then and the headers of the sub-StackRouters would be displayed in your root router's header. I think I remember something similarly worked a while back for me, but I haven't tested it in a while now and I think it's unlikely that it will still work like this but you can test nevertheless.

b) 这是我目前在不同情况下使用的.手动包含后退按钮:

b) and this is what I'm currently using in a different situation. To manually include the back button:

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',
});

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

If above solution doesn't work,

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

Try to add navigationOptions directly to the ProfileStack definition.

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

这篇关于reactnavigation 后退按钮的自定义后退导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！