如何在React Navigation v4中处理未初始化的导航ref？

如何解决如何在React Navigation v4中处理未初始化的导航ref？

上下文：我正在使用v4的React Navigation。我的导航器之外有一个<PushNotificationHandler />和<DynamicLinksHandler />。这些组件使用NavigationService提供的ref使用createAppContainer进行导航。

在v5中，您有一个onReady道具来检查是否已准备好导航该应用程序，以便您的NavigationService用于避免应用程序崩溃（请参见handling initialization docs）。但在v4中，它没有该属性，而且我不知道如何避免在应用程序导航器挂载之前（即在DynamicLinks或PushNotification组件内）发生导航。有什么建议吗？

v5文档： https://reactnavigation.org/docs/navigating-without-navigation-prop/#handling-initialization

v4文档： https://reactnavigation.org/docs/4.x/navigating-without-navigation-prop/#handling-initialization

NavigationService：

import { NavigationActions,StackActions } from 'react-navigation'

export default class NavigationService {
  static navigator

  static initialize(navigatorRef) {
    NavigationService.navigator = navigatorRef
  }

  static isNavigatorDefined() {
    // App hasn't mounted so don't navigate
    if (!NavigationService.navigator) {
      // Todo: We need to push these navigations into a queue and navigate once the app mounts
      console.error('NavigationService.navigator is undefined')
      return false
    }
    return true
  }

  static navigate(routeName,params) {
    if (!NavigationService.isNavigatorDefined()) {
      return
    }

    // Perform navigation if the app has mounted
    NavigationService.navigator.dispatch(
      NavigationActions.navigate({
        routeName,params,})
    )
  }
...
}

AppMain：

...

const AppMain = () => {
  ...
  return (
    <>
      <DynamicLinksHandler />
      <PushNotificationHandler />
      <AppNavigator
        ref={(navigatorRef) => NavigationService.initialize(navigatorRef)}
        onNavigationStateChange={() => handleNavigationStateChange}
      />
    </>
  )
}

export default AppMain

DynamicLinksHandler（代码段）：

...
// In a listener for dynamic links
NavigationService.navigate('GroupHome',{
          group: {
            id: groupId,},})
...

解决方法

您可以将ref'navigatorRef'传递给其他组件，如果！ref.current，则ref尚未准备好。 我用一些svg来操作svg的dom。在第一个渲染中ref.current为null，因此返回。在第二个渲染上，设置了ref，因此继续。 您可以创建一个常量isReady = ref.current吗？ true：false，并且{if（isReady &&