當無法獲取到navigation屬性的時候該如何導航

通常我們可以使用navigation屬性上的navigate或者popToTop方法來進行應用內的導航。但 這並不是導航的唯一方法，如果你沒有使用像redux集成一樣傳遞自己的navigation屬性，那你就可以使用頂級導航器來分發你的導航操作。當你想要觸發導航操作而又無法獲得navigation屬性的時候，你可以嘗試下面的方法。

通過ref 訪問導航器，並將其傳遞給我們稍後將使用其進行導航的NavigationService。只能在應用程序的頂級導航器（或者根導航器）中使用它。

// App.js

import { createStackNavigator, createAppContainer } from 'react-navigation';
import NavigationService from './NavigationService';

const TopLevelNavigator = createStackNavigator({
  /* ... */
});

const AppContainer = createAppContainer(TopLevelNavigator);

export default class App extends React.Component {
  // ...

  render() {
    return (
      <AppContainer
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
      />
    );
  }
}

下一步，我們定義NavigationService，它是一個可以調度用戶定義的導航操作的簡單模塊。

// NavigationService.js

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

然後，在你的任何javascript模塊中，只需導入NavigationService並調用你從它導出的函數。你就可以在你的React組件之外使用這種方法（事實上，它在內部使用時也可以）。

// any js module
import NavigationService from 'path-to-NavigationService.js';

// ...

NavigationService.navigate('ChatScreen', { userName: 'Lucy' });

在NavigationService中，您可以創建自己的導航操作，或將多個導航操作組合成一個，然後在整個應用程序中輕鬆的複用他們。在編寫測試代碼時候，你可以模擬導航功能，並使用正確的參數來決定是否調用正確的功能。