Violação invariável: falta a prop de navegação para este navegador

Estou recebendo esta mensagem quando tentei iniciar meu aplicativo nativo Reage. Normalmente, este tipo de formato funciona em outra navegação de tela múltipla, mas de alguma forma não funciona neste caso.

Aqui está o erro:

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

Este é o formato do meu aplicativo:

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 tem uma série de alterações importantes, incluindo um contêiner de aplicativo explícito necessário para o navegador raiz.

No passado, qualquer navegador poderia atuar como o contêiner de navegação no nível superior do seu aplicativo, porque eles estavam todos embalados em “contêineres de navegação”. O contêiner de navegação, agora conhecido como contêiner de aplicativo, é um componente de ordem superior que mantém o estado de navegação do seu aplicativo e lida com a interação com o mundo externo para transformar eventos de vinculação em ações de navegação e assim por diante.

Na v2 e anteriores, os contêineres no React Navigation são fornecidos automaticamente pelas funções create * Navigator. A partir da v3, você deve usar o contêiner diretamente. Na v3, também renomeamos createNavigationContainer para createAppContainer.

Observe também que, se agora você estiver usando a v4, os navegadores foram movidos para um repositório separado. Agora você precisará instalar e importar do 'react-navigation-stack'. Por exemplo, import { createStackNavigator } from 'react-navigation-stack'a solução abaixo é para v3.

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

Um exemplo de código mais abrangente:

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

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;

Em seguida, referencie-o com

<App />

Crie um novo arquivo ScreenContainer.js (você pode escolher o nome). Em seguida, no arquivo ScreenContainer, adicione:

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; 

Em seguida, em seu arquivo App.js:

import Container from './ScreenContainer';

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

Aqui está outra maneira

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

Simples eu fiz

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

Ao invés 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;   

em seu arquivo App.js, faça referência a ele com </container>

Eu tinha o código na parte inferior

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

Simplesmente substituí por e funcionou como um encanto. Definitivamente, é porque as atualizações na biblioteca de navegação reativa:

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

Além disso, incluí a biblioteca createAppContainer na navegação reativa na parte superior também.

Este é para criar um navegador inferior com duas guias:

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;

Eu perdi minhas 2,5 horas para obter esta solução depois de muitas pesquisas no Google ... Espero que funcione.

apenas importe estes dois:

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

e faça uma pequena alteração em seu código como esta:

crie const acima da classe

const AppNavigator = createAppContainer(RootStack);

e, finalmente, chame esse const na classe em vez de <RootStack/>

<AppNavigator />

Obrigado!

Eu tenho lutado nos últimos dias. Bem, pode ser que você também esteja lutando para resolver se e se excluiu o react-navigation de package.json e instalou usando npm, verifique seu projeto de backup e veja a versão de navegação e tente adicionar o mesmo e remover os módulos de nó e fazer a instalação do npm. Espero que funcione.

Boa sorte quebrando sua cabeça com React-Native :-)