Question

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

导致自动状态转换，无需重新加载当前屏幕（例如，通过更改参数）
能够使用＆＃39;返回＆＃39;按钮以反转此过渡

由于我StackNavigator嵌套在TabNavigator内，这很复杂：处理这样的内部动作的常用方法是简单地听后退按钮事件（在componentDidMount中注册事件并在componentWillUnmount中删除它），但不幸的是，当我这样做时，我的处理程序也会在其他标签打开时触发，这会让人感到困惑用户。

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

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

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

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 })来控制后退按钮的行为。

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

1 个答案: