নেটি.ক্রেটেনএভিগেটর কারখানা কোনও ফাংশন নয়

Question

আমি আমার প্রকল্পে একটি ড্রয়ার নেভিগেশন ডিজাইন করতে যাচ্ছি।

আমি এই আদেশ দ্বারা এটি ইনস্টল:

npm install @react-navigation/drawer

তারপরে এটি আমদানি করা App.js

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

এটি আমার package.jsonবিষয়বস্তু:

"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/drawer": "^5.0.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.6",
"react-native-reanimated": "^1.7.0",
"react-native-screens": "^2.0.0-beta.1",
"react-native-view-shot": "^3.0.2",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.1.0",

এটি আমার App.jsবিষয়বস্তু:

const App = () => {
  const Drawer = createDrawerNavigator();
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="login">
          <Drawer.Screen name="login" component={Login} />
          <Drawer.Screen name="second" component={SecondPage} />
        </Drawer.Navigator>
      </NavigationContainer>
    </View>
  )
};

আমার বলা উচিত যে আমি ইতিমধ্যে তৈরি Loginএবং SecondPageউপাদান তৈরি করেছি এবং নামক কোনও ফাইলে তাদের ঘোষণা করেছিroot.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Login, Header, SecondPage, Footer, ThirdPage } from './components/index';

const AppNavigator = createStackNavigator({
  login: { screen: Login },
  header: { screen: Header },
  second: { screen: SecondPage },
  footer: { screen: Footer },
  third: { screen: ThirdPage }
}, {
  initialRouteName: 'login',
  headerMode: 'none',
  mode: 'modal',
}, {});

export default createAppContainer(AppNavigator);

তবে আমি একটি ত্রুটি পেয়েছি (নিম্নলিখিত পর্দা)।

আমি এটা কিভাবে ঠিক করবো?

index.js

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';

Comments

আমার একই সমস্যা ছিল, আবার চালানো - এনপিএম ইনস্টল @ রিএ্যাক্ট নেভিগেশন / নেটিভ সমস্যার সমাধান করেছে

— লিরন শের

আমি সত্যিই এটির প্রশংসা করি, ইস্যুটি সমাধান হয়ে গেছে, আপনি কীভাবে ড্রয়ারের স্টাইল পরিবর্তন করবেন জানেন? আমার অর্থ ব্যাকগ্রাউন্ড

— কালার

ধন্যবাদ @ লিরনশের আপডেট @ রিএ্যাক্ট-নেভিগেশন / নেটিভ আমার পক্ষে কাজ করেছে

— হাসান জান

Answer 1

আপনি এখন কী করার চেষ্টা করছেন তা আমি বুঝতে পারি না। আমি মনে করি আপনি একটি ড্রয়ার নেভিগেটর যুক্ত করতে চান।

আপনার সমস্যাটি হ'ল আপনাকে একটি ধারক ব্যবহার করতে হবে তবে আপনার দুটি রয়েছে এবং ক্রিয়েস্ট্যাক নেভিগেটরের দুটি প্যারামিটার রয়েছে তবে আপনার তিনটি রয়েছে।

createStackNavigator (রুটকনফিগস, স্ট্যাকনাভিগেটর কনফিগ);

আমি মনে করি আপনার নেভিগেটর কাঠামো নিম্নলিখিত হিসাবে হওয়া উচিত।

Drawers.js

export default const Drawers = () => {
  const Drawer = createDrawerNavigator();
  return (
        <Drawer.Navigator initialRouteName="login">
          <Drawer.Screen name="login" component={Login} />
          <Drawer.Screen name="second" component={SecondPage} />
        </Drawer.Navigator>
  )
};

App.js

import Drawers from "./Drawers"
...

const AppNavigator = createStackNavigator({
  login: { screen: Drawers },
  header: { screen: Header },
  second: { screen: SecondPage },
  footer: { screen: Footer },
  third: { screen: ThirdPage }
}, {
  initialRouteName: 'login',
  headerMode: 'none',
  mode: 'modal',
});

export default createAppContainer(AppNavigator)

index.js

import Login from './login';
import Header from './header';
import SecondPage from './secondpage';
import Footer from './footer';
import ThirdPage from './thirdpage';

export { Login, Header, SecondPage, Footer, ThirdPage}

অথবা

এই সমস্যাটি সংস্করণটির সাথে সামঞ্জস্যের সমস্যা হতে পারে। React-Navigationএবং StackNavigatorসংস্করণগুলি আপ টু ডেট থাকতে হবে।

Comments

আমি এখনই আপনার সমাধানটি চেষ্টা করেছি, দুর্ভাগ্যক্রমে এটি কার্যকর হয়নি

— roz333

@ roz333 একই ত্রুটি ঘটে?

— হং বিকাশকারী

হ্যাঁ ঠিক একই ত্রুটি

— roz333

@ roz333 আপনি কি আমাকে index.js ফাইলটি দেখাতে পারবেন?

— হং বিকাশকারী

অবশ্যই এটি সূচক.জেএস বিষয়বস্তু:। `` রফতানি * থেকে '। / লগিন'; এক্সপোর্ট * থেকে './ হেডার'; './secondpage' থেকে রফতানি করুন; এক্সপোর্ট * থেকে './ ফুটার'; এক্সপোর্ট * থেকে './ থার্ডপেজ'; `` `

— roz333

Answer 2

আপনি আপনার প্রকল্পে প্রতিক্রিয়া নেভিগেশন 4 এবং প্রতিক্রিয়া নেভিগেশন 5 উভয়কেই একত্রিত করছেন। এটি বৈধ নয়।

প্রতিক্রিয়া ন্যাভিগেশন 4 প্যাকেজ: react-navigation, react-navigation-stack, react-navigation-drawerইত্যাদি

প্রতিক্রিয়া ন্যাভিগেশন 5 প্যাকেজ: @react-navigation/native, @react-navigation/stack, @react-navigation/drawerইত্যাদি

সরকারী দস্তাবেজগুলি অনুসরণ করুন এবং প্যাকেজগুলির সঠিক সংস্করণ এবং সিনট্যাক্স ব্যবহার করুন https://reactnavication.org/docs/en/getting-st সূত্র html

মূলত আপনার কোডটি মুছে ফেলুন root.jsএবং এখানে স্ট্যাক নেভিগেটর তৈরি করুন https://reactnavication.org/docs/en/stack-navigator.html

Answer 3

ইনস্টল করার চেষ্টা করুন: সুতা যোগ করুন বিক্রিয়া-নেভিগেশন-স্ট্যাক

এবং নির্ভরতা: সুতা যোগ করুন-নেটিভ-অঙ্গভঙ্গি-হ্যান্ডলার রিঅ্যাক্ট-নেটিভ-রিনিমেটেড রিএ্যাক্ট-নেটিভ-স্ক্রিনগুলি রিট্যাক্ট-নেটিভ-সেফ-এরিয়া-কনটেক্সট @ রিএ্যাক্ট-নেটিভ-কমিউনিটি / মাস্কড ভিউ

আপনার রুটে: 'রিএ্যাক্ট-নেভিগেশন-স্ট্যাক' থেকে import createStackNavigator import আমদানি করুন;

Answer 4

সূচক.জেএস সামগ্রী

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';