Invariant Violation: नेविगेशन नाविक इस नाविक के लिए गायब है

Question

मुझे यह संदेश तब मिल रहा है जब मैंने अपनी प्रतिक्रिया मूल एप्लिकेशन को प्रारंभ करने का प्रयास किया। आमतौर पर इस तरह का प्रारूप अन्य मल्टी स्क्रीन नेविगेशन पर काम करता है लेकिन इस मामले में किसी तरह काम नहीं करता है।

यहाँ त्रुटि है:

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 />;
  }
}

Comments

यह कहता है कि आप एप्लिकेशन कंटेनर को याद कर रहे हैं

— दानव

तो मूल रूप से मुझे एक एप कंटेनर के अंदर स्टैक नेविगेटर में सब कुछ डालना होगा? मैं जिस उलझन में हूं, वह यह है कि इस तरह के सेटअप ने मेरी पिछली परियोजनाओं के साथ बिना किसी दोष के काम किया है।

— ग्लेन परेल

Answer 1

रिएक्ट नेविगेशन 3.0 में रूट नेविगेटर के लिए आवश्यक स्पष्ट ऐप कंटेनर सहित कई ब्रेकिंग परिवर्तन हैं।

अतीत में, कोई भी नेविगेटर आपके ऐप के शीर्ष-स्तर पर नेविगेशन कंटेनर के रूप में कार्य कर सकता था, क्योंकि वे सभी "नेविगेशन कंटेनरों" में लिपटे हुए थे। नेविगेशन कंटेनर, जिसे अब ऐप कंटेनर के रूप में जाना जाता है, एक उच्च-क्रम-घटक है जो आपके ऐप के नेविगेशन राज्य को बनाए रखता है और बाहरी दुनिया के साथ बातचीत को जोड़ने के लिए नेविगेशन क्रियाओं और इतने पर चालू करता है।

V2 और इससे पहले, रिएक्ट नेविगेशन में कंटेनर स्वचालित रूप से बनाएँ * नेविगेटर फ़ंक्शन द्वारा प्रदान किए जाते हैं। V3 के रूप में, आपको सीधे कंटेनर का उपयोग करना आवश्यक है। V3 में हमने createNavigationContainer का नाम बदलकर createAppContainer भी कर दिया है।

कृपया यह भी ध्यान दें कि यदि आप अब v4 का उपयोग कर रहे हैं, तो नेविगेटर को एक अलग रेपो में स्थानांतरित कर दिया गया है। अब आपको इंस्टॉल और आयात करना होगा '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;

Comments

सुपर कन्फ्यूज्ड @Turnipdabeets क्या आप अधिक व्यापक कोड उदाहरण प्रदान करने में सक्षम हैं (मैं रिएक्टिव नेटिव के लिए नया हूं)।

— टॉम डिकसन

मेरी मदद के लिए धन्यवाद ! :)

— ब्लू ट्राम

@Turnipdabeets मैंने इस समाधान का उपयोग किया है, लेकिन मुझे एक त्रुटि मिल रही है " createStackNavigator()को स्थानांतरित कर दिया गया है react-navigation-stack। अधिक जानकारी के लिए reactnavigation.org/docs/4.x/stack-navigator.html देखें ।" क्या तुम कृप्या मेरी मदद कर सकते हो।

— kb920 3

@ kb920 देखें stackoverflow.com/questions/57817573/…

— शलजमबेटे सेप

यह मेरे लिए भी काम करता है। तो मूल रूप से आपको एक ऐप कंटेनर के अंदर सब कुछ डालना होगा।

— लाहिरु अमरथुंगे

Answer 2

@ टॉम डिकसन कुछ इस तरह:

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 />

Answer 3

एक नई फ़ाइल बनाएं 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 />
    );
  }
}

Answer 4

यहाँ एक और तरीका है

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

Answer 5

const AppNavigator = createStackNavigator({
  Home: { screen: Home },
  Friends: { screen: Friends },
});

सिंपल मैंने किया

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

के बजाय

export default AppNavigator;

Answer 6

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>

Answer 7

मेरे पास सबसे नीचे कोड था

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 लाइब्रेरी को शीर्ष पर भी शामिल किया।

Answer 8

यह एक दो नावों के साथ नीचे नाविक बनाने के लिए है:

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;

Answer 9

मैंने कई Google खोजों के बाद इस समाधान को प्राप्त करने के लिए अपने 2.5 घंटे बर्बाद कर दिए ... आशा है कि यह काम करेगा।

बस इस दो को आयात करें:

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

और इस तरह अपने कोड में थोड़ा बदलाव करें:

वर्ग के ऊपर कास्ट बनाएँ

const AppNavigator = createAppContainer(RootStack);

और अंत में कक्षा में उस कॉन्स्टेबल को बुलाएं <RootStack/>

<AppNavigator />

Thankx!

Answer 10

मैं पिछले कुछ दिनों से संघर्ष कर रहा था। हो सकता है कि आप भी हल करने के लिए संघर्ष कर रहे हों, अगर आपने पैकेज-जेनसन से प्रतिक्रिया-नेविगेशन को हटा दिया है और npm का उपयोग करके स्थापित किया गया है, तो कृपया अपने बैकअप प्रोजेक्ट को देखें और नेविगेशन संस्करण देखें और जोड़ने का प्रयास करें समान और नोड-मॉड्यूल को हटा दें और npm इंस्टॉल करें। आशा है इसके कार्य।

सौभाग्य प्रतिक्रिया-मूल निवासी के साथ अपना सिर तोड़ना :-)

Comments

एसओ में आपका स्वागत है। यह एक उत्तर की तरह नहीं दिखता है।

— माइक पूले

Android के संस्थापक!

— सुमित शुक्ला