reactnavigation 后退按钮的自定义后退导航

IT技术 reactjs react-native react-navigation
2021-05-15 17:55:25

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

谢谢。

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

嗨,谁使用过 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