web-dev-qa-db-fra.com

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 rea. Habituellement, ce type de format fonctionne sur une autre navigation multi-écrans mais ne fonctionne pas 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 />;
  }
}
reactjsreact-native
88
Glenn Parale

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

Auparavant, tout navigateur pouvait servir de conteneur de navigation au plus haut niveau de votre application, car ils étaient tous enveloppés dans des "conteneurs de navigation". Le conteneur de navigation, désormais appelé conteneur d'applications, est un composant d'ordre supérieur qui conserve l'état de navigation de votre application et gère les interactions avec le monde extérieur pour transformer les événements de liaison en actions de navigation, etc.

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

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;
146
Turnipdabeets

@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 le référencer avec

<App />
20
Damien Mason

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;

Ensuite, dans votre fichier App.js:

import Container from './ScreenContainer';

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

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

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é à merveille. C'est certainement parce que les mises à jour dans la bibliothèque de réaction-navigation:

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

De plus, j'ai inclus la bibliothèque createAppContainer dans la navigation réactive au sommet.

1
muhammad tayyab
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;
1
Ali Akram
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>

1
user10926450

Il se peut que vous ayez également du mal à résoudre le problème si et si vous avez supprimé la réaction de navigation de package.json et que vous l'avez installée à l'aide de npm, vérifiez votre projet de sauvegarde, la version de navigation et essayez d'ajouter le idem, supprimez les modules de nœud et installez npm. J'espère que cela fonctionne.

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

0
Andy Rubin

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
AzizStark