在 react-native-router-flux 中使用 Actions.reset("key") 时，会对组件产生什么影响

Question

我使用 react-native-router-flux 作为 react-native 路由器，在我的情况下，当用户登出时，我使用 Action.reset("key")，但是 getDerivedStateFromProps next props还有pre-data，谁能告诉我原因，或者如何用其他方式解决问题。

Answer 1

react-native-router-flux 基于 react-navigaion。这样我们就可以找到概念和解释。

首先我们看到js源代码，它位于navigationStore

reset = (routeName, data) => {
    const params = filterParam(data);
    const parent = getParent(this.state, routeName);
    this.dispatch(
      StackActions.reset({
        index: 0,
        key: parent ? parent.key : null,
        actions: [
          NavigationActions.navigate({
            routeName,
            params,
          }),
        ],
      }),
    );
  };
}

StackActions.reset 仅重置操作会擦除整个导航状态并将其替换为多个操作的结果。所以它只会改变导航状态。我们可以在 react-navigation api.

中看到

对于导航生命周期，与网络不同，导航不会重新安装组件。它管理路由器使用堆栈。以下为官方说法：

Consider a stack navigator with screens A and B. After navigating to A, its componentDidMount is called. When pushing B, its componentDidMount is also called, but A remains mounted on the stack and its componentWillUnmount is therefore not called.

When going back from B to A, componentWillUnmount of B is called, but componentDidMount of A is not because A remained mounted the whole time.

因此，当组件从路由器堆栈中移除时，导航将卸载该组件，例如返回、重置

在 react-native-router-flux 中使用 Actions.reset("key") 时，会对组件产生什么影响

when using Actions.reset("key") in react-native-router-flux, what will affect the component

router

react-native

react-native-router-flux