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

【问题标题】：Custom back navigation for reactnavigation back buttonreactnavigation后退按钮的自定义后退导航
【发布时间】：2018-10-09 00:15:08
【问题描述】：

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

谢谢。

【问题讨论】：

只需传入您自己的组件，单击该组件时会将您想要的任何页面推送到 StackNavigator。

标签： reactjs react-native react-navigation

【解决方案1】：

你可以尝试两件事：

a) 在您的sub-StackRouters 中使用headerMode: 'none' 而不是您的根路由器（名为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 }
  }

【讨论】：

HeaderBackButton 现在不是react-navigation 的一部分...我在哪里可以得到它？
@Baterka HeaderBackButton 已移至react-navigation-stack
HeaderBackButton has been moved 到 @react-navigation/elements。

【解决方案2】：

嗨，曾经使用 react-navigation 5.x 的人，您可能无法使用 navigationOptions 进行导航。该选项已替换为options。

说出您在屏幕 -1 中的内容，然后导航到屏幕 2，然后导航到屏幕 3。默认情况下，使用 react-navigation 你可以从 screen-3 导航到 screen-2。但是，如果您想要自定义导航，例如，如果您想从屏幕 3 导航到屏幕 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

【讨论】：

HeaderBackButton has been moved 到 @react-navigation/elements。