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

Question

我正在使用反应导航（堆栈导航）。我想更改我的标题后退按钮图标路线。

1. 家
2. 书票

3. 我的预订

   这些是我的项目中的屏幕。现在，当我单击 MyBookings 屏幕中的标题返回按钮时，它应该路由到主屏幕。

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

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

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

Answer 3

如果您不想使用自定义后退按钮（例如，为了避免处理不同的“本机”按钮设计），也可以重置导航状态。在你这样的情况下：

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);

这样你只需设置一堆导航并让它跳转到索引位置。

此设置必须在离开的场景中完成，以便在下一个场景中后退按钮按预期工作。

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