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

遇到类似问题的任何人：

问题在于我们明确呈现了导航器。就像在"Common Mistakes" section of the docs中所说的：

大多数应用程序只能在React组件内部呈现一个导航器，并且通常位于应用程序根组件附近。起初这有点违反直觉，但对React Navigation的体系结构很重要。

显然，如果不这样做，将使您无法一路通过导航器进行深度链接¯\ _（ツ）_ /

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

1 个答案: