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

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 />;
  }
}

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;

@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 />

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 />
    );
  }
}

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);

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;

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>

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.

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;

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!

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 :-)