在特定屏幕上使用反应导航修改后退按钮

Question

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

如何更改特定屏幕的 back 按钮（由 react-navigation 自动添加）功能？

我的意思是，与其在屏幕堆栈中前进一步，我希望它在堆栈中后退 2 步，或者通过提供屏幕名称手动执行（同样仅在一个组件上）。

原文由 greW 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

来自文档的示例

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

覆盖后退按钮

每当用户可以从当前屏幕返回时，后退按钮将在 StackNavigator 中自动呈现 — 换句话说，只要在堆。

一般来说，这就是你想要的。但在某些情况下，您可能希望通过上述选项自定义后退按钮，在这种情况下，您可以指定 headerLeft ，就像我们对 headerRight 所做的那样 --- ，并完全覆盖后退按钮。

原文由 bennygenel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

考虑一下，您分别有 3 个屏幕 A、B、C。因此，StackNavigator 中后退按钮的默认功能是：- 如果您在屏幕 C 上按下后退按钮，它将带您到上一个屏幕，即屏幕 B。要覆盖它，您可以在屏幕 C 上执行类似的操作： -

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

原文由 Varun Gupta 发布，翻译遵循 CC BY-SA 4.0 许可协议