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

Posted 2023-02-19

【中文标题】如何在反应导航中更改后退按钮路线

【英文标题】：How to change back button route in react navigation

【发布时间】：2018-02-10 04:13:21

【问题描述】：

我正在使用 react-navigation（堆栈导航）。我想更改我的标题返回按钮图标路线。

首页 书票

我的预订

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

【问题讨论】：

您是否尝试过使用navigation.navigate([path])？

是的，我试过了，但对我的情况不起作用。但感谢 cmets。

【参考方案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"/>
       )
);

【参考方案2】：

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

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

【参考方案3】：

如果您不想使用自定义后退按钮（例如，为了避免处理不同的“原生”按钮设计），也可以使用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。

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

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