在反应导航中推送状态而不刷新屏幕

Question

我有一个使用 React Navigation 的应用程序，我需要能够执行以下操作：

• 导致自动状态转换，无需重新加载当前屏幕（例如通过更改参数）
• 能够使用“后退”按钮来反转此转换

这很复杂，因为我使用的是嵌套在 TabNavigator 中的 StackNavigator：处理此类内部操作的常用方法是简单地监听后退按钮事件（在componentDidMount 并在 componentWillUnmount 中删除它），但不幸的是，当我这样做时，我的处理程序也会在其他选项卡打开时触发，这让用户感到困惑。

我尝试过使用navigation.setState，但是当我使用它时，它不会向导航堆栈添加任何内容，因此无法通过按后退按钮撤消状态更改。

我也尝试过使用navigation.push，但这会导致我的屏幕的一个新实例被创建为具有不同的组件状态，并且转换是可见的，但这不起作用。

有没有人对我如何做到这一点有任何建议？

Answer 1

您仍应考虑以自己的方式处理此内部操作。但navigation. addListener 可能不适合这里。相反，您应该将标题中的后退按钮组件替换为您自己的组件，并添加您自己的 onPress 属性。

例子：

import {
  HeaderBackButton
} from 'react-navigation'

class MyComponent extends Component {

  static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params

    class BackButton extends React.Component {
      goBack = () => {
        if (params.isInternalGoBack) {
          // do some internal goback action
        } else {
          this.props.onPress() // original Back button behavior
        }
      }
      render () {
        return (
          <HeaderBackButton {...this.props} onPress={this.goBack} />
        )
      }
    }

    return {
      headerLeft: BackButton
    }
  }
  ...
}

然后您可以使用this.props.navigation.setParams({ isInternalGoBack: true }) 来控制返回按钮的行为。