TypeError:在导航状态下找不到“路线”

may*_*til 5 navigation reactjs react-native react-navigation

我使用的createMaterialTopTabNavigator是react-navigation,其中我有两个单独的屏幕UpdatesStackShopsStack并且我想从这些屏幕导航到其他屏幕,所以我写的像这样<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;
Run Code Online (Sandbox Code Playgroud)

错误画面

bht*_*bor 6

我知道已经很晚了,但是只是为那些在搜索引擎上迷迷糊糊的人解答:

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

  2. 如果必须包装TopTab,除了导航道具外,还需要可访问TopTab中的路由器。这样,它们都引用相同的路由器。简而言之,添加ParentTheme:

静态路由器= TopTab.router;

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