Глубокая связь с вложенными React Native Navigators не поддерживается

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 Navigation.

Очевидно, что если вы этого не сделаете, вам не удастся получить глубокую связь через ваши навигаторы ¯ \ _ (ツ) _ / ¯