Violación invariante: falta el accesorio de navegación para este navegador

Recibo este mensaje cuando intenté iniciar mi aplicación nativa de reacción. Por lo general, este tipo de formato funciona en otra navegación de múltiples pantallas, pero de alguna manera no funciona en este caso.

Aquí está el error:

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

Aquí está el formato de mi aplicación:

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 tiene una serie de cambios importantes que incluyen un contenedor de aplicaciones explícito requerido para el navegador raíz.

En el pasado, cualquier navegador podía actuar como contenedor de navegación en el nivel superior de su aplicación porque todos estaban envueltos en "contenedores de navegación". El contenedor de navegación, ahora conocido como contenedor de aplicaciones, es un componente de orden superior que mantiene el estado de navegación de su aplicación y maneja la interacción con el mundo exterior para convertir los eventos de vinculación en acciones de navegación, etc.

En v2 y anteriores, los contenedores en React Navigation son proporcionados automáticamente por las funciones create * Navigator. A partir de la versión 3, debe utilizar el contenedor directamente. En v3 también cambiamos el nombre de createNavigationContainer a createAppContainer.

También tenga en cuenta que si ahora está usando v4, los navegadores se han movido a un repositorio separado. Ahora deberá instalar e importar desde 'react-navigation-stack'. Por ejemplo import { createStackNavigator } from 'react-navigation-stack', la siguiente solución es para v3.

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

Un ejemplo de código más 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 algo como esto:

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;

Luego haz referencia a él con

<App />

Cree un nuevo archivo ScreenContainer.js (puede elegir el nombre). Luego, en el archivo ScreenContainer agregue:

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; 

Luego, en su archivo App.js:

import Container from './ScreenContainer';

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

Aquí hay otra forma

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 lo hice

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

En vez 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;   

en su archivo App.js, haga referencia a él con </container>

Tenía el código en la parte inferior

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

Simplemente lo reemplacé y funcionó a las mil maravillas. Definitivamente, es porque las actualizaciones en la biblioteca de navegación de reacción:

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

Además, incluí la biblioteca createAppContainer en react-navigation en la parte superior también.

Este es para crear un navegador inferior con dos pestañas:

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;

Perdí mis 2.5 horas para obtener esta solución después de muchas búsquedas en Google ... Espero que esto funcione.

solo importa estos dos:

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

y haz un pequeño cambio en tu código como este:

crear const por encima de la clase

const AppNavigator = createAppContainer(RootStack);

y finalmente llamar a esa constante en la clase en lugar de <RootStack/>

<AppNavigator />

¡Gracias!

He estado luchando desde los últimos días.Bueno, es posible que usted también haya estado luchando por resolver si ha eliminado la navegación de reacción de package.json e instalado usando npm, verifique su proyecto de copia de seguridad y vea la versión de navegación e intente agregar el mismo y elimine los módulos de nodo y haga npm install. Espero que funcione.

Buena suerte rompiendo tu cabeza con React-Native :-)