在特定屏幕上使用反应导航修改后退按钮 [英] Modifying back button with react-navigation on specific screen

问题描述

这里我使用 react-navigation 作为我的导航库.

如何更改特定屏幕的 back 按钮(由 react-navigation 自动添加)功能?

我的意思是，与其在屏幕堆栈中走一步，我希望它在堆栈中后退两步，或者通过提供屏幕名称手动完成(再次仅在一个组件上).

解决方案

您可以使用该屏幕的 navigationOptions 覆盖特定屏幕的后退按钮.您可以在 react- 中阅读有关覆盖后退按钮的更多信息导航 文档

文档中的示例

class HomeScreen 扩展 React.Component {静态导航选项 = {headerTitle: <LogoTitle/>,标题右:(<按钮onPress={() =>alert('这是一个按钮！')}标题=信息"颜色="#fff"/>),};}

<块引用>

覆盖后退按钮

后退按钮将在 StackNavigator 中自动呈现只要用户有可能从当前状态返回屏幕——换句话说，后退按钮将在任何时候呈现堆栈中有不止一个屏幕.

通常，这就是您想要的.但有可能在某些您比您更想自定义后退按钮的情况可以通过上面提到的选项，在这种情况下你可以指定一个 headerLeft，就像我们对 headerRight 所做的一样，并且完全覆盖后退按钮.

Here I'm using react-navigation as my navigation library.

How can I change the back button (that is added automatically by react-navigation) functionality for a specific screen?

I mean instead of going one step in the stack of screens I want it to go 2 steps back in stack or do it manually by giving the screen name (again only on one component).

解决方案

You can override back button for a specific screen with navigationOptions of that screen. You can read more info about overriding back button in react-navigation docs

Example from docs

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}

Overriding the back button

The back button will be rendered automatically in a StackNavigator whenever it is possible for the user to go back from their current screen — in other words, the back button will be rendered whenever there is more than one screen in the stack.

Generally, this is what you want. But it's possible that in some circumstances that you want to customize the back button more than you can through the options mentioned above, in which case you can specify a headerLeft, just as we did with headerRight, and completely override the back button.

这篇关于在特定屏幕上使用反应导航修改后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！