reactjs - react - Violación invariante: falta el prop de navegación para este navegador

react native npm

Question

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 pantalla múltiple, 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á mi formato de 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 />;
}
}

Answer 1

Éste es 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;

Answer 2

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

<App />

Answer 3

Aquí hay otra manera

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

Answer 4

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

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

Answer 5

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 el contenedor de navegación en el nivel superior de su aplicación porque 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 eventos de vinculación en acciones de navegación, etc.

En v2 y versiones anteriores, los contenedores en React Navigation son proporcionados automáticamente por las funciones create * Navigator. A partir de v3, se requiere que use el contenedor directamente. En v3 también cambiamos el nombre de createNavigationContainer a createAppContainer.

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;

Answer 6

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 la perfección. Definitivamente, es porque las actualizaciones en la biblioteca de navegación de reacción:

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

Además, también incluí la biblioteca createAppContainer en la navegación de reacción en la parte superior.

Answer 7

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, consúltelo con </container>

Answer 8

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;

Simple lo hice

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

En lugar de

export default AppNavigator;