无法深度链接到嵌套的 React 本机导航器

Question

我在使用 React Navigation 2.18.3 时遇到了问题。我无法深度链接到属于嵌套导航器的路线。我有一个顶级选项卡导航器，MainTabNavigator它有两个路线，主页和菜单：

import React, { PureComponent } from 'react';
import { createMaterialTopTabNavigator } from 'react-navigation';
import Explore from '../Home/Home';
import Menu from '../Menu/Menu';
import { TabBarContainer as TabBar } from './TabBar';
class MainTabNavigator extends PureComponent {
  getRoutes() {
    return {
      Explore: { screen: Explore },
      Menu: { screen: Menu, path: 'menu' }
    };
  }
  getOptions() {
    return {
      tabBarComponent: TabBar,
      tabBarPosition: 'bottom',
      swipeEnabled: false
    };
  }
  render() {
    const TabNavigator = createMaterialTopTabNavigator(
      this.getRoutes(),
      this.getOptions()
    );
    return (
      <TabNavigator uriPrefix="myapp://" />
    );
  }
}
export default MainTabNavigator;

Menu本身就是一个堆栈导航器：

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import MenuPage from './MenuPage';
import Products from '../Products/Products';
import onNavigationStateChange from '../../util/onNavigationStateChange';
import Settings from './Settings/Settings';
class Menu extends Component {
  getRoutes() {
    return {
      MenuPage: { screen: MenuPage, path: 'page' },
      Products: { screen: Products, path: 'products' },
      Settings: { screen: Settings }
    };
  }
  getOptions() {
    return {
      initialRouteName: 'MenuPage',
      headerMode: 'none',
      cardStyle: { backgroundColor: '#fff' }
    };
  }
  render() {
    const Navigation = createStackNavigator(this.getRoutes(), this.getOptions());
    const screenProps = { rootNavigation: this.props.navigation };
    return (
      <Navigation
        uriPrefix="myapp://menu"
        screenProps={screenProps}
        onNavigationStateChange={onNavigationStateChange}
      />
    );
  }
}
export default Menu;

当我去野生动物园并导航到myapp://menu/products时，菜单导航器正确导航，但 MainTabNavigator 卡在Home上。对于用户来说，它看起来没有发生导航。如果用户随后导航到"菜单"，他们将发现"菜单"已导航到"产品"页面。

如何让MainTabNavigator在回复深层链接时正确导航？

Answer 1

对于遇到类似问题的人：

问题是我们显式渲染了导航器。正如文档的"常见错误"部分所述：

大多数应用程序应该只在 React 组件中渲染一个导航器，这通常位于应用程序的根组件附近。起初这有点违反直觉，但对于 React 导航的架构来说很重要。

显然，如果不这样做，您将无法通过导航器̄\_(ツ)_/̄进行深度链接