reactjs - 如何更改 react 导航中的后退按钮路线

标签 reactjs react-native react-navigation stack-navigator

我正在使用 react 导航(堆栈导航)。我想更改我的标题后退按钮图标路线。

  1. 首页
  2. 预订机票
  3. 我的预订

    这些是我项目中的屏幕。现在,当我单击“MyBookings”屏幕中的标题后退按钮时,它应该路由到主屏幕。

最佳答案

如果您的 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"/>
       )}
});

关于reactjs - 如何更改 react 导航中的后退按钮路线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45994430/

相关文章:

react-native - 如何解决未处理的 promise 拒绝 : Error: Unable to activate keep awake React Native

reactjs - 如果屏幕包裹在 HOC 中,则 StackNavigator 屏幕的 react 导航标题不会呈现

javascript - undefined 不是一个对象(评估 '_this2.props.navigation.navigate' ) - React Native

javascript - 使用 nodeFetch 在 JSON API 响应中正确显示特殊字符

javascript - React-native如何在文本输入上向上移动屏幕

css - React Bootstrap,为 NavItems 添加悬停效果

javascript - 如何在 React Native 中使用 setNativeProps 更改图片来源

javascript - React Navigation v6 最佳结构

javascript - 带有 redux 工具包的本地存储,用于电子商务应用程序上的购物车

javascript - react +助焊剂。优化将存储状态传递给组件的过程