Recibo este mensaje cuando intenté iniciar mi aplicación nativa de reacción. Por lo general, este tipo de formato funciona en otras pantallas de navegación múltiples, 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.htmlAquí 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, incluido 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 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, debe usar 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 solución a continuació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 referencialo 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 /> ); } }