web-dev-qa-db-fra.com

TypeError: aucun "itinéraire" trouvé dans l'état de navigation

J'utilise createMaterialTopTabNavigator de react-navigation dans lequel j'ai deux écrans distincts UpdatesStack et ShopsStack et je veux naviguer vers un autre écran à partir de ces écrans, donc j'ai écrit comme <Toptab navigation={this.props.navigation} /> et il me montre suite à une erreur d'écran rouge.

Et si j'écris comme <Toptab /> alors il n'y a pas d'erreur mais je ne peux pas naviguer.

alors comment puis-je résoudre ce problème et pouvoir naviguer.

code 

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

Je sais qu'il est tard, mais juste pour répondre à ceux qui tombent dessus à partir des moteurs de recherche:

  1. Pourquoi n'exportez-vous pas TopTab par défaut lui-même? Il ne semble pas nécessaire d'envelopper TopTab avec le composant ParentTheme dans votre cas d'utilisation. Vous pouvez styliser le navigateur TopTab lui-même et le rendre comme n'importe quel autre composant.

  2. Si vous devez envelopper le TopTab, vous devez avoir le routeur du TopTab accessible, en plus de l'accessoire de navigation. De cette façon, ils se réfèrent tous deux au même routeur. Autrement dit, ajoutez ParentTheme:

routeur statique = TopTab.router;

Consultez les navigateurs personnalisés pour plus d'informations. https://reactnavigation.org/docs/en/custom-navigators.html

8
bhtabor

si vous utilisez des composants React fonctionnels avec des hooks, vous ne pourrez pas déclarer de variable statique à l'intérieur de vos composants car ce ne sont pas des classes JS.

Déclarez plutôt la variable de routeur comme suit:

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.