আক্রমণকারী লঙ্ঘন: নেভিগেশন প্রপ এই নেভিগেটরের জন্য অনুপস্থিত

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 এর রুট নেভিগেটরের জন্য প্রয়োজনীয় একটি সুস্পষ্ট অ্যাপের ধারক সহ বেশ কয়েকটি ব্রেকিং পরিবর্তন রয়েছে।

অতীতে, কোনও নেভিগেটর আপনার অ্যাপের শীর্ষ স্তরের নেভিগেশন ধারক হিসাবে কাজ করতে পারে কারণ সেগুলি সমস্ত "নেভিগেশন পাত্রে" আবৃত ছিল। নেভিগেশন ধারক, এখন অ্যাপ্লিকেশন ধারক হিসাবে পরিচিত, এটি একটি উচ্চ-অর্ডার-উপাদান যা আপনার অ্যাপ্লিকেশনটির নেভিগেশন স্থিতি বজায় রাখে এবং বাইরের জগতের সাথে সংযোগ ইভেন্টগুলিকে নেভিগেশন ক্রিয়াকলাপে রূপান্তর করতে এবং তাই পরিচালনা করে।

ভি 2 এবং তার আগে, প্রতিক্রিয়া নেভিগেশনের পাত্রে স্বয়ংক্রিয়ভাবে তৈরি করুন * নেভিগেটর ফাংশন সরবরাহ করা হয়। ভি 3 হিসাবে, আপনার সরাসরি ধারকটি ব্যবহার করা দরকার। ভি 3-তে আমরা ক্রিয়েট নেভিগেশনকন্টেনারটির নামও তৈরি করেছিলাম অ্যাপ্লিকেশনস কনটেইনার।

এছাড়াও দয়া করে নোট করুন যে আপনি যদি এখন 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 আমি এই সমাধান ব্যবহৃত কিন্তু আমি একটি ত্রুটি পাচ্ছি " createStackNavigator()সরানো হয়েছে react-navigation-stack। দেখুন reactnavigation.org/docs/4.x/stack-navigator.html আরো বিস্তারিত জানার জন্য।" আপনি কি আমাকে সাহায্য করতে পারেন?

— kb920

@ kb920 দেখতে stackoverflow.com/questions/57817573/...

— Turnipdabeets

এটি আমার পক্ষেও কাজ করে। সুতরাং মূলত আপনাকে একটি অ্যাপ কনটেইনার এর ভিতরে সমস্ত কিছু রাখতে হবে।

— লাহিরু অমরাথুঙ্গে

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 (আপনি নামটি চয়ন করতে পারেন)। তারপরে স্ক্রীনকন্টেইনার ফাইলটিতে যুক্ত করুন:

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; 

তারপরে আপনার অ্যাপ.জেএস ফাইলটিতে:

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;   

আপনার অ্যাপ.জেএস ফাইলের সাথে এটি উল্লেখ করে </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;

এছাড়াও, আমি উপরের দিকে ক্রিয়া -নেভিগেশনে ক্রিয়েট অ্যাপকন্টেইনার লাইব্রেরিও অন্তর্ভুক্ত করেছি।

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

অনেক গুগল অনুসন্ধানের পরেও আমি এই সমাধানটি পেতে আমার 2.5 ঘন্টা নষ্ট করেছি ... আশা করি এটি কার্যকর হবে।

শুধু এই দুটি আমদানি করুন:

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

এবং এইভাবে আপনার কোডে কিছুটা পরিবর্তন করুন:

ক্লাসের উপরে কনস্ট তৈরি করুন

const AppNavigator = createAppContainer(RootStack);

এবং শেষ পর্যন্ত পরিবর্তে ক্লাসে যে কনস্ট কল <RootStack/>

<AppNavigator />

বড়ই সৌন্দর্য্য!

Answer 10

আমি গত কয়েক দিন ধরেই লড়াই করে যাচ্ছি youআপনি খুব সম্ভবত সমাধানের জন্য লড়াই করে যাচ্ছেন এবং যদি আপনি প্যাকেজ.জসন থেকে প্রতিক্রিয়া-নেভিগেশন মুছে ফেলেছেন এবং এনএমপি ব্যবহার করে ইনস্টল করেছেন তবে আপনার ব্যাকআপ প্রকল্পটি দেখুন এবং নেভিগেশন সংস্করণটি দেখুন এবং যুক্ত করার চেষ্টা করুন একই এবং নোড-মডিউলগুলি সরান এবং এনপিএম ইনস্টল করুন। আশা করি এর কাজগুলি

প্রতিক্রিয়া-নেটিভ :-) দিয়ে আপনার মাথাটি ভাঙ্গার জন্য শুভকামনা

Comments

তাই আপনাকে স্বাগতম। এটি কোনও উত্তরের মতো দেখাচ্ছে না।

— মাইক পুল

অ্যান্ড্রয়েডের প্রতিষ্ঠাতা!

— সুমিত শুক্লা