Invariante Verletzung: Die Navigationsstütze fehlt für diesen Navigator

120

Ich erhalte diese Nachricht, als ich versucht habe, meine native App zu starten. Normalerweise funktioniert diese Art von Format bei anderen Mehrbildnavigationen, in diesem Fall jedoch nicht.

Hier ist der Fehler:

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

Hier ist mein App-Format:

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 />;
  }
}
Glenn Parale
quelle
Es heißt, Sie vermissen App-Container
Demon
Also muss ich im Grunde alles in den Stack Navigator in einem App Container legen? Ich bin verwirrt darüber, dass diese Art der Einrichtung mit meinen vorherigen Projekten ohne Fehler funktioniert hat.
Glenn Parale

Antworten:

183

React Navigation 3.0 enthält eine Reihe von wichtigen Änderungen, darunter einen expliziten App-Container, der für den Root-Navigator erforderlich ist.

In der Vergangenheit konnte jeder Navigator als Navigationscontainer auf der obersten Ebene Ihrer App fungieren, da alle in „Navigationscontainer“ eingeschlossen waren. Der Navigationscontainer, der jetzt als App-Container bezeichnet wird, ist eine Komponente höherer Ordnung, die den Navigationsstatus Ihrer App beibehält und die Interaktion mit der Außenwelt verwaltet, um Verknüpfungsereignisse in Navigationsaktionen usw. umzuwandeln.

In Version 2 und früheren Versionen werden die Container in React Navigation automatisch von den Funktionen create * Navigator bereitgestellt. Ab Version 3 müssen Sie den Container direkt verwenden. In Version 3 haben wir außerdem createNavigationContainer in createAppContainer umbenannt.

Beachten Sie außerdem, dass Navigatoren, wenn Sie jetzt Version 4 verwenden, in ein separates Repo verschoben wurden. Sie müssen jetzt installieren und importieren von 'react-navigation-stack'. Zum Beispiel import { createStackNavigator } from 'react-navigation-stack'Die folgende Lösung ist für v3.

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

Ein umfassenderes Codebeispiel:

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;
Rüben
quelle
7
Super verwirrt @Turnipdabeets können Sie ein umfassenderes Codebeispiel bereitstellen (ich bin neu bei React Native).
Tom Dickson
Danke für deine Hilfe ! :)
Blaue Straßenbahn
2
@Turnipdabeets Ich habe diese Lösung verwendet, erhalte jedoch die Fehlermeldung " createStackNavigator()wurde verschoben react-navigation-stack. Weitere Informationen finden Sie unter reactnavigation.org/docs/4.x/stack-navigator.html ." Kannst du mir bitte helfen?
kb920
@ kb920 siehe stackoverflow.com/questions/57817573/…
Turnipdabeets
Das funktioniert auch bei mir. Im Grunde muss man also alles in einen App-Container legen.
Lahiru Amarathunge
26

@ Tom Dickson so etwas:

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;

Dann referenziere es mit

<App />
Damien Mason
quelle
10

Erstellen Sie eine neue Datei ScreenContainer.js (Sie können den Namen auswählen). Fügen Sie dann in der ScreenContainer-Datei Folgendes hinzu:

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; 

Dann in Ihrer App.js-Datei:

import Container from './ScreenContainer';

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

Hier ist ein anderer Weg

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);
Sanjay
quelle
3
const AppNavigator = createStackNavigator({
  Home: { screen: Home },
  Friends: { screen: Friends },
});

Einfach habe ich getan

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

Anstatt

export default AppNavigator;
Ali Akram
quelle
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;   

Verweisen Sie in Ihrer App.js-Datei darauf </container>

Dmitry
quelle
2

Ich hatte den Code unten

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

Ich habe es einfach durch ersetzt und es hat wie ein Zauber funktioniert. Auf jeden Fall, weil Updates in der React-Navigation-Bibliothek:

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

Außerdem habe ich die createAppContainer- Bibliothek oben in die Reaktionsnavigation aufgenommen.

Muhammad Tayyab
quelle
2

Dieser dient zum Erstellen eines unteren Navigators mit zwei Registerkarten:

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;
AzizStark
quelle
0

Ich habe meine 2,5 Stunden verschwendet, um diese Lösung nach vielen Google-Suchen zu erhalten ... Ich hoffe, das wird funktionieren.

Importieren Sie einfach diese beiden:

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

und nehmen Sie eine kleine Änderung an Ihrem Code wie folgt vor:

Erstelle const über der Klasse

const AppNavigator = createAppContainer(RootStack);

und nenne schließlich diese Konstante in der Klasse anstelle von <RootStack/>

<AppNavigator />

Danke!

Shiv
quelle
-2

Ich hatte in den letzten Tagen Probleme. Vielleicht haben auch Sie Probleme, diese zu lösen, wenn Sie die React-Navigation aus package.json gelöscht und mit npm installiert haben. Überprüfen Sie Ihr Backup-Projekt, sehen Sie sich die Navigationsversion an und versuchen Sie, die hinzuzufügen Gleiche und entfernen Sie Node-Module und installieren Sie npm. Hoffe seine Werke.

Viel Glück beim Brechen des Kopfes mit React-Native :-)

Andy Rubin
quelle
Willkommen bei SO. Dies sieht nicht nach einer Antwort aus.
Mike Poole
Gründer von Android!
Sumit Shukla