react-native - 在不刷新屏幕的情况下在 react 导航中推送状态

Question

我有一个使用 React Navigation 的应用程序，我需要在其中执行以下操作:

导致自动状态转换，而不重新加载当前屏幕(例如通过更改参数)

能够使用“后退”按钮来反转此转换

由于我使用的是 StackNavigator，这一点很复杂。嵌套在 TabNavigator 内:处理这样的内部操作的通常方法是简单地监听后退按钮事件(在 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 })控制后退按钮的行为。