react-native - 如何判断是否使用 ReactNavigation 导航到屏幕

Question

每当屏幕出现时，我想在 React Native 应用程序中刷新屏幕上的数据 - 就像在 ViewWillAppear 中一样方法。我尝试使用 componentWillMount方法，但看起来它在出现之前会触发一次，并且在再次导航到 View 时不会再次触发。

看这个例子 https://reactnavigation.org/docs/guides/screen-tracking ，看来我可以在onNavigationStateChange上加一个监听器根导航上的方法，但我想将逻辑保留在屏幕中，因为如果我将那个 scree 的数据获取逻辑移到根导航器之外，它会变得困惑。

我试图按照示例并将该方法设置为我的堆栈导航，但它似乎没有触发。

  <RootNavigation ref={nav => { this.navigator = nav; }}
    onNavigationStateChange={(prevState, currentState, action) => {

      // maybe here I can fire redux event or something to let screens
      // know that they are getting focus - however it doesn't fire so
      // I might be implementing this incorrectly

      const currentScreen = getCurrentRouteName(currentState);
      const prevScreen = getCurrentRouteName(prevState);

      if (prevScreen !== currentScreen) {
        console.log('navigating to this screen', currentScreen);
      }
    }}
  />

Answer 1

所以这就是我如何使用 onNavigateStateChange 做到的.

      <RootNavigation
        ref={nav => { this.navigator = nav; }}
        uriPrefix={prefix}
        onNavigationStateChange={(prevState, currentState) => {
          const currentScreen = this.getCurrentRouteName(currentState);
          const prevScreen = this.getCurrentRouteName(prevState);
          if (prevScreen !== currentScreen) {
            this.props.emitActiveScreen(currentScreen);
            {/*console.log('onNavigationStateChange', currentScreen);*/}
          }
        }}
      />

在您的屏幕中，您可以检查您的 View 是否会出现，请注意 MyPage是导航对象中的路线名称。

  componentWillReceiveProps(nextProps) {
    if ((nextProps.activeScreen === 'MyPage' && nextProps.activeScreen !== this.props.activeScreen)) {
      // do your on view will appear logic here
    }
  }