การละเมิดที่ไม่เปลี่ยนแปลง: เสานำทางขาดหายไปสำหรับเนวิเกเตอร์นี้

ฉันได้รับข้อความนี้เมื่อฉันพยายามเริ่มแอปตอบกลับในตัว โดยปกติรูปแบบประเภทนี้จะใช้งานได้กับการนำทางแบบหลายหน้าจออื่น ๆ แต่ในกรณีนี้ก็ใช้ไม่ได้

นี่คือข้อผิดพลาด:

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

นี่คือรูปแบบแอปของฉัน:

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 มีการเปลี่ยนแปลงที่ไม่สมบูรณ์จำนวนมากรวมถึงคอนเทนเนอร์แอปที่ชัดเจนที่จำเป็นสำหรับเนวิเกเตอร์รูท

ในอดีตเนวิเกเตอร์ใด ๆ สามารถทำหน้าที่เป็นคอนเทนเนอร์การนำทางที่ระดับบนสุดของแอปของคุณได้เนื่องจากพวกมันถูกรวมอยู่ใน คอนเทนเนอร์การนำทางซึ่งปัจจุบันรู้จักกันในชื่อคอนเทนเนอร์ของแอปเป็นส่วนประกอบลำดับที่สูงกว่าที่รักษาสถานะการนำทางของแอปของคุณและจัดการการโต้ตอบกับโลกภายนอกเพื่อเปลี่ยนการเชื่อมโยงเหตุการณ์เป็นการดำเนินการนำทางเป็นต้น

ใน v2 และก่อนหน้านี้คอนเทนเนอร์ใน React Navigation จะถูกจัดเตรียมโดยอัตโนมัติโดยฟังก์ชัน create * Navigator ตั้งแต่เวอร์ชัน 3 คุณจะต้องใช้คอนเทนเนอร์โดยตรง ใน v3 เรายังเปลี่ยนชื่อ createNavigationContainer เป็น createAppContainer

นอกจากนี้โปรดทราบว่าหากคุณกำลังใช้ v4 ระบบนำทางจะถูกย้ายไปที่ repo แยกต่างหาก 'react-navigation-stack'ตอนนี้คุณจะต้องติดตั้งและนำเข้าจาก ตัวอย่างเช่นimport { createStackNavigator } from 'react-navigation-stack'โซลูชันด้านล่างนี้ใช้สำหรับ v3

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

ตัวอย่างโค้ดที่ครอบคลุมมากขึ้น:

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;

@ ทอมดิ๊กสันอะไรทำนองนี้:

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;

จากนั้นอ้างอิงด้วย

<App />

สร้างไฟล์ใหม่ ScreenContainer.js (คุณสามารถเลือกชื่อได้) จากนั้นในไฟล์ ScreenContainer ให้เพิ่ม:

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; 

จากนั้นที่ไฟล์ App.js ของคุณ:

import Container from './ScreenContainer';

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

นี่เป็นอีกวิธีหนึ่ง

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

ง่าย ๆ ที่ฉันทำ

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

แทน

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;   

ในไฟล์ App.js ของคุณอ้างอิงด้วยไฟล์ </container>

ฉันมีรหัสที่ด้านล่าง

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

ฉันเพียงแค่แทนที่ด้วยและมันก็เหมือนมีเสน่ห์ แน่นอนว่าเป็นเพราะการอัปเดตในไลบรารีการนำทางปฏิกิริยา:

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

นอกจากนี้ฉันยังรวมไลบรารีcreateAppContainerไว้ใน react-navigation ที่ด้านบนด้วย

อันนี้คือการสร้างเนวิเกเตอร์ด้านล่างที่มีสองแท็บ:

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;

ฉันเสียเวลา 2.5 ชั่วโมงเพื่อหาวิธีแก้ปัญหานี้หลังจากค้นหา Google หลายครั้ง ... หวังว่าจะได้ผล

เพียงแค่นำเข้าสองสิ่งนี้:

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

และทำการเปลี่ยนแปลงเล็กน้อยกับรหัสของคุณดังนี้:

สร้าง const เหนือชั้นเรียน

const AppNavigator = createAppContainer(RootStack);

และสุดท้ายเรียก const นั้นในคลาสแทน <RootStack/>

<AppNavigator />

thankx!

ฉันกำลังดิ้นรนตั้งแต่สองสามวันที่ผ่านมาคุณอาจจะพยายามแก้ปัญหามากเกินไปหากและถ้าคุณลบ react-navigation จาก package.json และติดตั้งโดยใช้ npm โปรดตรวจสอบโครงการสำรองของคุณและดูเวอร์ชันการนำทางและลองเพิ่ม เดียวกันและลบโมดูลโหนดและทำการติดตั้ง npm หวังว่าจะได้ผล

โชคดีที่ทำลายหัวของคุณด้วย React-Native :-)