TypeError：在导航状态中找不到“路线”

Posted 2023-04-13

【中文标题】TypeError：在导航状态中找不到“路线”

【英文标题】：TypeError: No "routes" found in navigation state

【发布时间】：2019-01-11 11:48:51

【问题描述】：

我正在使用来自 react-navigation 的createMaterialTopTabNavigator，其中我有两个单独的屏幕UpdatesStack 和ShopsStack，我想从这些屏幕导航到其他屏幕，所以我像<Toptab navigation=this.props.navigation /> 这样写，它显示我关注红屏错误。

如果我像<Toptab /> 这样写，那么没有错误，但我无法导航。

那么我该如何解决这个问题并能够导航。

代码

class Parenthome extends Component 
  render() 
    const  navigate  = this.props.navigation;
    return (
      <View style=styles.container>
        <Toolbarandroid
          style=styles.toolbar
          title="Toolbar"
          titleColor="#ff6600"
        />

        <Toptab navigation=this.props.navigation />
      </View>
    );
  


const UpdatesStack = createStackNavigator(
  
    Updates:  screen: Home 
  ,
  
    initialRouteName: "Updates"
  
);

const ShopsStack = createStackNavigator(
  
    Shops:  screen: Conshop 
  ,
  
    initialRouteName: "Shops"
  
);

const Toptab = createMaterialTopTabNavigator(
  Updatestab:  screen: UpdatesStack ,
  Shopstab:  screen: ShopsStack 
);

export default Parenthome;

【参考方案1】：

我知道这已经很晚了，但只是为了回答那些从搜索引擎中偶然发现的人：

为什么不导出默认的 TopTab 本身。在您的用例中，似乎不需要用 ParentTheme 组件包装 TopTab。您可以设置 TopTab 导航器本身的样式并像任何其他组件一样呈现它。

如果您必须包装 TopTab，除了导航属性之外，您还需要让 TopTab 中的路由器可访问。这样他们都指的是同一个路由器。简单来说就是在ParentTheme中添加：

静态路由器 = TopTab.router;

查看自定义导航器了解更多信息。 https://reactnavigation.org/docs/en/custom-navigators.html

【参考方案2】：

如果您使用带有钩子的函数式反应组件，您将无法在组件内声明静态变量，因为它们不是 JS 类。

改为如下声明路由器变量：

const reactComponent = (props) =>  
    /* your component logic and render here */

reactComponent.router = TopTab.router; //equivalent to static variable inside a class
export default reactComponent