刚入门react native，导航用的React Navigation，使用这个进行路由页面之间的跳转没有问题，但是我想在子组件中跳转到某个页面，始终无法实现。比如在一个banner组件中，实现点击banner，进入一个详情页面，因为banner只是一个组件，并没有注册到 React Navigation的StackNavigator，所以不能使用 this.props.navigation.navigate()，搜索了很久，终于找到解决办法了，整整浪费了好几个小时，不得不说，学习react native真是到处是坑啊。

言归正传

在navigation prop上调用诸如navigate或popToTop之类的函数并不是应用内导航的唯一方法。 作为替代方案，你可以在顶级导航器上分发导航操作，前提是您没有像使用 redux 集成一样传递自己的navigation prop。 当你想要从无法访问navigation prop的地方触发导航操作，或者你正在寻找替代方法来使用navigation prop 时，这个方法是非常有用的。

您可以通过ref访问导航器，并将其传递给我们稍后将使用其进行导航的NavigationService。 只能在应用程序的顶级导航器（或者说根导航器）中使用它。

app.js

// App.js

import NavigationService from './NavigationService';    //后面会展示具体代码

const TopLevelNavigator = createStackNavigator({ /* ... */ })  //你的路由

class App extends React.Component {  

// ...

  render() {       
    return (      
      <TopLevelNavigator
        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.js

// ...

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

在NavigationService中，您可以创建自己的导航操作，或将多个导航操作组合成一个，然后在整个应用程序中轻松地复用它们。 在编写测试代码时，你可以模拟导航功能，并使用正确的参数来决定是否调用正确的功能。