Violation invariante: l'accessoire de navigation est manquant pour ce navigateur


121

Je reçois ce message lorsque j'ai essayé de démarrer mon application native react. Habituellement, ce type de format fonctionne sur d'autres systèmes de navigation multi-écrans mais ne fonctionne pas d'une manière ou d'une autre dans ce cas.

Voici l'erreur:

Invariant Violation: The navigation prop is missing for this navigator. In 
react-navigation 3 you must set up your app container directly. More info: 
https://reactnavigation.org/docs/en/app-containers.html

Voici le format de mon application:

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import Login from './view/login.js'
import SignUp from './view/signup.js'

const RootStack = createStackNavigator(
  {
    Home: {
      screen: Login
    },
    Signup: {
      screen: SignUp
    }
  },
  {
    initialRouteName: 'Home'
  }

);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

il dit qu'il vous manque un conteneur d'application
Démon

Donc, fondamentalement, je dois tout mettre dans le navigateur de pile dans un conteneur d'applications? Ce qui me trouble, c'est que ce type de configuration a fonctionné sans faute avec mes projets précédents.
Glenn Parale

Réponses:


185

React Navigation 3.0 a un certain nombre de modifications de rupture, y compris un conteneur d'application explicite requis pour le navigateur racine.

Dans le passé, n'importe quel navigateur pouvait jouer le rôle de conteneur de navigation au niveau supérieur de votre application, car ils étaient tous enveloppés dans des «conteneurs de navigation». Le conteneur de navigation, maintenant appelé conteneur d'application, est un composant d'ordre supérieur qui maintient l'état de navigation de votre application et gère l'interaction avec le monde extérieur pour transformer les événements de liaison en actions de navigation, etc.

Dans la v2 et les versions antérieures, les conteneurs de React Navigation sont automatiquement fournis par les fonctions create * Navigator. À partir de la v3, vous devez utiliser le conteneur directement. Dans la v3, nous avons également renommé createNavigationContainer en createAppContainer.

Veuillez également noter que si vous utilisez maintenant la v4, les navigateurs ont été déplacés vers un dépôt distinct. Vous devrez maintenant installer et importer à partir de 'react-navigation-stack'. Par exemple import { createStackNavigator } from 'react-navigation-stack'La solution ci-dessous est pour la v3.

import {
  createStackNavigator,
  createAppContainer
} from 'react-navigation';
const MainNavigator = createStackNavigator({...});
const App = createAppContainer(MainNavigator);

Un exemple de code plus complet:

import {
      createStackNavigator,
      createAppContainer
    } from 'react-navigation';
import Login from './view/login.js'
import SignUp from './view/signup.js'

const RootStack = createStackNavigator({
    Home: {
      screen: Login
    },
    Signup: {
      screen: SignUp
    }
  });

const App = createAppContainer(RootStack);

export default App;

7
Super confus @Turnipdabeets êtes-vous en mesure de fournir un exemple de code plus complet (je suis nouveau sur React Native).
Tom Dickson

Merci de m'aider! :)
Blue Tram

2
@Turnipdabeets J'ai utilisé cette solution mais j'obtiens une erreur " createStackNavigator()a été déplacé vers react-navigation-stack. Voir reactnavigation.org/docs/4.x/stack-navigator.html pour plus de détails." Pouvez vous me donner un coup de main.
kb920


Cela fonctionne aussi pour moi. Donc, fondamentalement, vous devez tout mettre dans un conteneur d'applications.
Lahiru Amarathunge

26

@Tom Dickson quelque chose comme ça:

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import ScreenOne from './ScreenOne';
import ScreenTwo from './ScreenTwo';

const NavStack = createStackNavigator({
    ScreenOne: { 
        screen: ScreenOne,
    },
    ScreenTwo: { 
        screen: ScreenTwo,
    },
});

const App = createAppContainer(NavStack);

export default App;

Puis référencez-le avec

<App />

10

Créez un nouveau fichier ScreenContainer.js (vous pouvez choisir le nom). Ensuite, dans le fichier ScreenContainer, ajoutez:

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import MainScreen from './MainScreen'; 
import AboutScreen from './AboutScreen';

const NavigationStack = createStackNavigator({
    Main: { 
        screen: MainScreen,
    },
    About: { 
        screen: AboutScreen,
    },
});

const Container = createAppContainer(NavigationStack);

export default Container; 

Puis dans votre fichier App.js:

import Container from './ScreenContainer';

class App extends Component {
  render() {
    return (
      <Container />
    );
  }
}

6

Voici une autre façon

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator,createAppContainer } from 'react-navigation';

import Login from './view/login.js'
import SignUp from './view/signup.js'

const RootStack = createStackNavigator(
  {
    Home: {
      screen: Login
    },
    Signup: {
      screen: SignUp
    }
  },
  {
    initialRouteName: 'Home'
  }

);

class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

export default createAppContainer(RootStack);

3
const AppNavigator = createStackNavigator({
  Home: { screen: Home },
  Friends: { screen: Friends },
});

Simple j'ai fait

const App = createAppContainer(AppNavigator);
export default App;

Au lieu de

export default AppNavigator;

2

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './home';
import Details from './details';

const Root = createStackNavigator({

    home: { 

        screen: Home,
    },

    details: { 

        screen: Details,
    },

});

const container = createAppContainer(Root);
export default container;   

dans votre fichier App.js, référencez-le avec </container>


2

J'avais le code en bas

export default class App extends React.Component {
  render() {
    return (
      <View >
        <SimpleApp style={{ width: Dimensions.get("window").width }} />
      </View>
    );
  }
}

Je l'ai simplement remplacé par et cela a fonctionné comme un charme. Certainement, c'est parce que les mises à jour dans la bibliothèque react-navigation:

const App = createAppContainer(SimpleApp);
export default App;

De plus, j'ai également inclus la bibliothèque createAppContainer dans la navigation de réaction en haut.


2

Celui-ci consiste à créer un navigateur inférieur avec deux onglets:

import {createBottomTabNavigator, createAppContainer} from 'react-navigation';

export class Home extends Component{
   //...
}

export class Settings extends Component{
   //...
}     

const navig = createBottomTabNavigator({
  Home: Home,
  Settings: Settings
});

const App = createAppContainer(navig);

export default App;

0

J'ai perdu mes 2,5 heures pour obtenir cette solution après de nombreuses recherches sur Google ... J'espère que cela fonctionnera.

importez simplement ces deux:

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";

et apportez un petit changement à votre code comme ceci:

créer const au-dessus de la classe

const AppNavigator = createAppContainer(RootStack);

et enfin appeler ce const dans la classe au lieu de <RootStack/>

<AppNavigator />

Merci!


-2

J'ai eu du mal ces derniers jours. Eh bien, vous avez peut-être aussi du mal à résoudre si et si vous avez supprimé la navigation de réaction de package.json et installée à l'aide de npm, veuillez vérifier votre projet de sauvegarde et voir la version de navigation et essayer d'ajouter le idem et supprimez les modules de nœuds et faites l'installation de npm. J'espère que ses œuvres.

Bonne chance pour vous casser la tête avec React-Native :-)


Bienvenue à SO. Cela ne ressemble pas à une réponse.
Mike Poole

Fondateur d'Android!
Sumit Shukla le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.