Pelanggaran Invarian: Alat bantu navigasi tidak ada untuk navigator ini

Saya menerima pesan ini ketika saya mencoba memulai aplikasi asli bereaksi saya. Biasanya format semacam ini berfungsi pada navigasi multi layar lainnya namun entah bagaimana tidak berfungsi dalam kasus ini.

Inilah kesalahannya:

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

Ini adalah format aplikasi saya:

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 memiliki sejumlah perubahan yang merusak termasuk wadah aplikasi eksplisit yang diperlukan untuk navigator root.

Di masa lalu, setiap navigator dapat bertindak sebagai wadah navigasi di tingkat atas aplikasi Anda karena semuanya digabungkan dalam "wadah navigasi". Penampung navigasi, sekarang dikenal sebagai penampung aplikasi, adalah komponen tingkat tinggi yang mempertahankan status navigasi aplikasi Anda dan menangani interaksi dengan dunia luar untuk mengubah peristiwa penautan menjadi tindakan navigasi, dan seterusnya.

Di v2 dan sebelumnya, container di React Navigation secara otomatis disediakan oleh fungsi create * Navigator. Mulai v3, Anda harus menggunakan container secara langsung. Di v3 kami juga mengganti nama createNavigationContainer menjadi createAppContainer.

Perlu diketahui juga bahwa jika Anda sekarang menggunakan v4, navigator telah dipindahkan ke repo terpisah. Anda sekarang harus memasang dan mengimpor dari 'react-navigation-stack'. Misalnya import { createStackNavigator } from 'react-navigation-stack'Solusi di bawah ini untuk v3.

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

Contoh kode yang lebih komprehensif:

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 sesuatu seperti ini:

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;

Kemudian referensikan dengan

<App />

Buat file baru ScreenContainer.js (Anda dapat memilih namanya). Kemudian di file ScreenContainer tambahkan:

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; 

Kemudian di file App.js Anda:

import Container from './ScreenContainer';

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

Berikut cara lain

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

Sederhana saya lakukan

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

Dari pada

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;   

di file App.js Anda mereferensikannya dengan </container>

Saya memiliki kode di bagian bawah

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

Saya hanya menggantinya dengan dan itu bekerja seperti pesona. Jelas, itu karena pembaruan di pustaka navigasi-react:

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

Juga, saya menyertakan pustaka createAppContainer ke dalam navigasi-reaksi di bagian atas juga.

Yang ini untuk membuat navigator bawah dengan dua tab:

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;

Saya menyia-nyiakan 2,5 jam saya untuk mendapatkan solusi ini setelah banyak pencarian google ... Semoga ini akan berhasil.

impor saja dua ini:

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

dan buat sedikit perubahan pada kode Anda seperti ini:

buat const di atas kelas

const AppNavigator = createAppContainer(RootStack);

dan terakhir panggil const itu di kelas, bukan <RootStack/>

<AppNavigator />

Terima kasih!

Saya telah berjuang dari beberapa hari terakhir.Nah mungkin Anda juga telah berjuang untuk menyelesaikannya jika dan jika Anda telah menghapus navigasi react dari package.json dan menginstal menggunakan npm, silakan periksa proyek cadangan Anda dan lihat versi navigasi dan coba tambahkan sama dan hapus modul-node dan lakukan npm install. Semoga berhasil.

Semoga berhasil memecahkan kepalamu dengan React-Native :-)