Violazione invariante: il supporto di navigazione manca per questo navigatore

Ricevo questo messaggio quando ho provato ad avviare la mia app nativa di React. Di solito questo tipo di formato funziona su altre navigazioni multischermo, ma in qualche modo non funziona in questo caso.

Ecco l'errore:

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

Ecco il formato della mia app:

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 ha una serie di modifiche importanti, incluso un contenitore app esplicito richiesto per il navigatore root.

In passato, qualsiasi navigatore poteva fungere da contenitore di navigazione al livello superiore della tua app perché erano tutti racchiusi in "contenitori di navigazione". Il contenitore di navigazione, ora noto come contenitore di app, è un componente di ordine superiore che mantiene lo stato di navigazione della tua app e gestisce l'interazione con il mondo esterno per trasformare eventi di collegamento in azioni di navigazione e così via.

Nella v2 e nelle precedenti, i contenitori in React Navigation vengono forniti automaticamente dalle funzioni create * Navigator. A partire dalla v3, è necessario utilizzare direttamente il contenitore. Nella v3 abbiamo anche rinominato createNavigationContainer in createAppContainer.

Inoltre, tieni presente che se stai utilizzando la v4, i navigatori sono stati spostati in un repository separato. Ora dovrai installare e importare da'react-navigation-stack' . Ad esempio, import { createStackNavigator } from 'react-navigation-stack'la soluzione seguente è per v3.

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

Un esempio di codice più completo:

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 qualcosa del genere:

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;

Quindi riferiscilo con

<App />

Crea un nuovo file ScreenContainer.js (puoi scegliere il nome). Quindi nel file ScreenContainer aggiungi:

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; 

Quindi nel tuo file App.js:

import Container from './ScreenContainer';

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

Ecco un altro modo

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

Semplice l'ho fatto

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

Invece di

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;   

nel tuo file App.js fai riferimento ad esso con </container>

Avevo il codice in fondo

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

L'ho semplicemente sostituito con e ha funzionato a meraviglia. Sicuramente, è perché gli aggiornamenti nella libreria di navigazione reattiva:

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

Inoltre, ho incluso anche la libreria createAppContainer nella navigazione reattiva in alto.

Questo serve per creare un navigatore inferiore con due schede:

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;

Ho sprecato le mie 2,5 ore per ottenere questa soluzione dopo molte ricerche su Google ... Spero che funzioni.

importa solo questi due:

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

e apporta una piccola modifica al tuo codice in questo modo:

crea const sopra la classe

const AppNavigator = createAppContainer(RootStack);

e infine chiama quel const nella classe invece di <RootStack/>

<AppNavigator />

Thankx!

Ho lottato negli ultimi giorni.Beh, potresti anche aver lottato per risolvere se e se hai cancellato la navigazione reattiva da package.json e installato usando npm, controlla il tuo progetto di backup e guarda la versione di navigazione e prova ad aggiungere il stesso e rimuovere i moduli del nodo ed eseguire l'installazione di npm. Spero che funzioni.

Buona fortuna che ti spacca la testa con React-Native :-)