โรงงาน native.createnavigator ไม่ใช่ฟังก์ชัน

ฉันจะออกแบบการนำทางลิ้นชักในโครงการของฉัน

ฉันติดตั้งโดยคำสั่งนี้:

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

ฉันไม่เข้าใจสิ่งที่คุณพยายามจะทำตอนนี้ ฉันคิดว่าคุณต้องการเพิ่ม Navigator Navigator

ปัญหาของคุณคือคุณต้องใช้คอนเทนเนอร์เดียว แต่คุณมีสองคอนเทนเนอร์และ 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รุ่นจะต้องทันสมัย

คุณกำลังรวมทั้ง React Navigation 4 และ React Navigation 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และสร้าง stack navigator ได้ที่นี่https://reactnavigation.org/docs/en/stack-navigator.html

ลองติดตั้ง: ไหมพรมเพิ่ม react-navigation-stack

และการพึ่งพา: เส้นด้ายเพิ่มปฏิกิริยา - พื้นเมือง - ท่าทาง - จัดการ - ปฏิกิริยา - พื้นเมือง - reanimated - หน้าจอปฏิกิริยา - พื้นเมือง - ปลอดภัย - พื้นที่ - บริบทบริบท - ปฏิกิริยา - พื้นเมือง - ชุมชน / หน้ากากมุมมอง

ในเส้นทางของคุณ: นำเข้า {createStackNavigator} จาก 'react-navigation-stack-'

เนื้อหา Index.js

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