Question

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

感谢。

Answer 1

你可以尝试两件事：

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。

在屏幕-1中说出您的意思，然后导航至screen-2，然后导航至screen-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

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

2 个答案: