Question

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

主页
BookTicket
MyBookings

这些是我项目中的屏幕。现在，当我点击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

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

Answer 3

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

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

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

3 个答案: