如何在反应导航中更改后退按钮路线

Question

我正在使用 react-navigation (stack-navigation)。我想更改 header 后退按钮图标路线。

首页
订票
我的预订

这些是我 project.Now 中的屏幕，当我在 MyBookings 屏幕中单击 header 后退按钮时，它应该会转到主屏幕。

Answer 1

如果您的 stackNavigator 堆栈配置正确，默认情况下必须有返回按钮。

但是如果您想替换默认按钮，只需添加 headerLeft 并在要更改后退按钮处理程序的页面中传递您的自定义组件屏幕导航选项

CreateAccountScreen.navigationOptions = ({navigation}) => ({
  headerStyle: styles.headerStyle,
  title: 'Create Account',
  headerTintColor: '#fefefe',
  headerTitleStyle: styles.headerTitleStyle,
  headerLeft: {()=>(
          <Icon name="chevron-left"
                onPress={() => navigation.goBack(null)}
                size={35} color="white"/>
       )}
});

Answer 2

如果您不想使用自定义后退按钮（例如，为了避免处理不同的 "native" 按钮设计），也可以 reset the navigation state。在您的情况下：

import { NavigationActions } from 'react-navigation';

const resetAction = NavigationActions.reset({
  index: 2,
  actions: [
    NavigationActions.navigate({ routeName: 'Home' }),
    NavigationActions.navigate({ routeName: 'BookTicket' }),
    NavigationActions.navigate({ routeName: 'MyBookings' }),
  ],
});
this.props.navigation.dispatch(resetAction);

这样你只需要设置一堆导航就可以了jump to the index position.

这个设置必须在离开的场景中完成，这样在下一个场景中后退按钮才能正常工作。

但无论如何我更喜欢这种方式，因为它允许保持 header 的默认外观并保持堆栈清洁。如果您使用 navigation.navigate 而不是 navigation.back，则后退按钮的堆栈将变得完全错误。

Answer 3

因此，React Navigation 的默认功能是：- 如果您在 Mybookings 屏幕上按后退按钮，它将带您到上一个屏幕，即 BookTicket 屏幕。要覆盖它，您可以在 MyBookings 屏幕上执行类似的操作：-

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('Home')}}/>)
 }
}

如何在反应导航中更改后退按钮路线

How to change back button route in react navigation

reactjs

react-native

react-navigation

stack-navigator