native.createnavigator फैक्ट्री एक फ़ंक्शन नहीं है

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

मैं एक ही मुद्दा था, फिर से चलाने के लिए - npm स्थापित @ प्रतिक्रिया-नेविगेशन / देशी समस्या हल

— लिरो शेर

? मैं वास्तव में आप जानते हैं कि कैसे दराज शैली बदलने के लिए है, की सराहना करते हैं यह, अंक हल किया गया है मैं backgroundeColor और आदि ... मतलब

— roz333

धन्यवाद @LironSher अपडेट @ रिएक्शन-नेविगेशन / देशी ने मेरे लिए काम किया

— हसन जान

Answer 1

मुझे समझ नहीं आ रहा है कि आप अब क्या करने की कोशिश कर रहे हैं। मुझे लगता है कि आप एक ड्रॉअर नेविगेटर जोड़ना चाहते हैं।

आपकी समस्या यह है कि आपको एक कंटेनर का उपयोग करना है, लेकिन आपके पास दो हैं, और createStackNavigator के दो पैरामीटर हैं, लेकिन आपके पास तीन हैं।

createStackNavigator (RouteConfigs, StackNavigatorConfig);

मुझे लगता है कि आपके नाविक संरचना निम्नानुसार होनी चाहिए।

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 फ़ाइल दिखा सकते हैं?

— डेवलपर

यकीन है कि यह index.js सामग्री है: `` निर्यात * से './login'; निर्यात * './header' से; निर्यात * 'से ।/ececondpage'; निर्यात * 'से ./footer'; निर्यात * 'से ।/thirdpage'; `` `

— 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://reactnavigation.org/docs/en/getting-started.html

मूल रूप से अपना कोड निकालें root.jsऔर स्टैक नेविगेटर को यहां बनाएं जैसे https://reactnavigation.org/docs/en/stack-navigator.html

Answer 3

स्थापित करने का प्रयास करें: यार्न प्रतिक्रिया-नेविगेशन-स्टैक जोड़ें

और निर्भरता: यार्न प्रतिक्रिया-देशी-जेस्चर-हैंडलर प्रतिक्रिया-मूल-पुनरीक्षित प्रतिक्रिया-मूल-स्क्रीन प्रतिक्रिया-मूल-सुरक्षित-क्षेत्र-संदर्भ @ प्रतिक्रिया-मूल-समुदाय / नकाबपोश-दृश्य जोड़ते हैं

अपने मार्गों में: 'रिएक्ट-नेविगेशन-स्टैक' से {createStackNavigator} आयात करें;

Answer 4

Index.js सामग्री

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