reactjs - meaning - react native tutorial




Invariant লঙ্ঘন: ন্যাভিগেশন প্রপা এই নেভিগেট জন্য অনুপস্থিত (6)

আমি আমার প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশন শুরু করার চেষ্টা করার সময় আমি এই বার্তা গ্রহণ করছি। সাধারণত এই ধরনের বিন্যাসে অন্যান্য মাল্টি স্ক্রিন নেভিগেশনে কাজ করে তবে যেকোনোভাবে এই ক্ষেত্রে কাজ করে না।

এখানে ত্রুটি হল:

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

@ টম ডিকসন এরকম কিছু

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

এখানে অন্য উপায়

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

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> সাথে উল্লেখ করে


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;

সহজ আমি করেছি

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

পরিবর্তে

 export default AppNavigator; 






react-native