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

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

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;

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

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

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

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

Einfach habe ich getan

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

Anstatt

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;   

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

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.

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;

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!

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