Naruszenie niezmienności: brak rekwizytu nawigacji w tym nawigatorze

Otrzymuję tę wiadomość, gdy próbuję uruchomić moją natywną aplikację React. Zwykle ten format działa w innych nawigacjach wieloekranowych, ale jakoś nie działa w tym przypadku.

Oto błąd:

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

Oto format mojej aplikacji:

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 ma wiele istotnych zmian, w tym jawny kontener aplikacji wymagany dla głównego nawigatora.

W przeszłości każdy nawigator mógł działać jako kontener nawigacyjny na najwyższym poziomie aplikacji, ponieważ wszystkie znajdowały się w „kontenerach nawigacyjnych”. Kontener nawigacji, obecnie nazywany kontenerem aplikacji, jest składnikiem wyższego rzędu, który utrzymuje stan nawigacji aplikacji i obsługuje interakcję ze światem zewnętrznym w celu przekształcenia zdarzeń z linkami w działania nawigacyjne i tak dalej.

W wersji 2 i wcześniejszych kontenery w React Navigation są automatycznie udostępniane przez funkcje create * Navigator. Od wersji 3 musisz bezpośrednio używać kontenera. W wersji 3 zmieniliśmy również nazwę createNavigationContainer na createAppContainer.

Należy również pamiętać, że jeśli używasz teraz wersji 4, nawigatory zostały przeniesione do oddzielnego repozytorium. Będziesz teraz musiał zainstalować i importować z 'react-navigation-stack'. Na przykład import { createStackNavigator } from 'react-navigation-stack'poniższe rozwiązanie dotyczy wersji v3.

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

Bardziej wszechstronny przykład kodu:

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, coś takiego:

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;

Następnie odwołaj się do niego za pomocą

<App />

Utwórz nowy plik ScreenContainer.js (możesz wybrać nazwę). Następnie w pliku ScreenContainer dodaj:

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; 

Następnie w pliku App.js:

import Container from './ScreenContainer';

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

Oto inny sposób

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

To proste

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

Zamiast

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;   

w pliku App.js odwołuj się do niego z </container>

Kod miałem na dole

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

Po prostu zastąpiłem go i działało jak urok. Zdecydowanie dzieje się tak dlatego, że aktualizacje w bibliotece reaktywnej nawigacji:

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

Ponadto, zawarte createAppContainer biblioteki do reagowania-nawigacji u góry, jak również.

Ten służy do utworzenia dolnego nawigatora z dwiema zakładkami:

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;

Zmarnowałem moje 2,5 godziny, aby uzyskać to rozwiązanie po wielu wyszukiwaniach w Google ... Mam nadzieję, że to zadziała.

po prostu zaimportuj te dwa:

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

i dokonaj niewielkiej zmiany w swoim kodzie w ten sposób:

utwórz const nad klasą

const AppNavigator = createAppContainer(RootStack);

i na koniec wywołaj tę stałą w klasie zamiast <RootStack/>

<AppNavigator />

Dziękuję!

Od kilku dni zmagałem się z problemami. Cóż, być może ty też miałeś problemy z rozwiązaniem, jeśli i jeśli usunąłeś reakcję-nawigację z package.json i zainstalowałeś go przy użyciu npm, sprawdź projekt kopii zapasowej i zobacz wersję nawigacji i spróbuj dodać to samo i usuń moduły węzłów i wykonaj instalację npm. Mam nadzieję, że to działa.

Powodzenia w łamaniu głowy dzięki React-Native :-)