如何在反应导航中更改后退按钮路线 [英] How to change back button route in react navigation

问题描述

我正在使用反应导航(stack-navigation).我想更改标题的后退按钮图标路线.

i am using react-navigation (stack-navigation). i want to change my header back button icon route.

1. 首页
2. BookTicket

3. MyBookings

1. Home
2. BookTicket

3. MyBookings

这些是我项目中的屏幕.现在，当我单击MyBookings屏幕中的标题后退按钮时，它应该转到主屏幕.

these are the screens i have in my project.Now when i click header back button in MyBookings screen it should route to Home Screen.

推荐答案

如果正确配置了stackNavigator堆栈，则默认情况下必须有后退按钮.

There must be back button in default if your stackNavigator stack is properly configured.

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

But if you would like to replace the default button just add headerLeft and pass your custom component Screen Navigation Options in the page you want to change the back button handler

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"/>
       )}
});

这篇关于如何在反应导航中更改后退按钮路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！