时间戳

首页 > 解决方案 > 如何处理 React Navigation v4 中未初始化的导航引用？

reactjs - 如何处理 React Navigation v4 中未初始化的导航引用？

问题描述

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

在 v5 中，您有一个onReadyprop 可以检查应用程序是否已准备好导航，以供 NavigationService 使用以避免应用程序崩溃（请参阅处理初始化文档）。但是在 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

导航服务：

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,
      })
    )
  }
...
}

应用程序主：

...

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,
          },
        })
...

标签： reactjsreact-nativereact-navigation

解决方案

您可以将 ref 'navigatorRef' 传递给其他组件，如果 !ref.current，则 ref 尚未准备好。我用一些 svg 来操作 svg 的 dom。在第一次渲染时 ref.current 为 null 所以返回。在第二次渲染中，设置了 ref，所以继续。您还可以创建一个 const isReady = ref.current 吗？true : false 并执行 {if (isReady && <PushNotificationHandler.../>

推荐阅读