web-dev-qa-db-ja.com

TypeError：ナビゲーション状態に「ルート」が見つかりません

2つの別個の画面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;

error screen

reactjsreact-nativenavigationreact-navigation
8
Mayuresh Patil

私はそれが遅いことを知っていますが、検索エンジンからこれにつまずいた人々のために答えるだけです：

  1. デフォルトのTopTab自体をエクスポートしてみませんか。ユースケースでは、TopTabをParentThemeコンポーネントでラップする必要はないようです。 TopTabナビゲーター自体をスタイル設定して、他のコンポーネントと同じようにレンダリングできます。

  2. TopTabをラップする必要がある場合は、ナビゲーションプロップに加えて、TopTabからルーターにアクセスできるようにする必要があります。このように、両方が同じルーターを参照します。簡単に言えば、ParentThemeを追加します。

静的ルーター= TopTab.router;

詳細については、カスタムナビゲーターをご覧ください。 https://reactnavigation.org/docs/en/custom-navigators.html

8
bhtabor

フック付きの機能的な反応コンポーネントを使用している場合、それらはJSクラスではないため、コンポーネント内で静的変数を宣言することはできません。

代わりに、次のようにルーター変数を宣言します。

const reactComponent = (props) => { 
    /* your component logic and render here */
}
reactComponent.router = TopTab.router; //equivalent to static variable inside a class
export default reactComponent
3
Jose P. V.