Блог

Контекст: я использую версию 4 навигации React. У меня есть <PushNotificationHandler /> и <DynamicLinksHandler /> это за пределами моих навигаторов. Эти компоненты используют для навигации NavigationService с ref помощью createAppContainer предоставленного from,.

В версии 5 у вас есть onReady поддержка, позволяющая проверить, готово ли приложение к навигации для использования вашим 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

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

Вы можете передать ссылку ‘navigatorRef’ другим компонентам, и если !ref.current, ссылка не готова. Я делаю это с некоторым svg, чтобы манипулировать dom svg. При первом отображении ссылка.current равна нулю, поэтому верните. При втором рендеринге ссылка установлена, так что продолжайте. Вы также можете создать const isReady = ref.current ? true : false и выполните {if (isReady amp;amp; <PushNotificationHandler …/>