nhà máy local.createnavigator không phải là một chức năng

Tôi sẽ thiết kế một điều hướng Ngăn kéo trong dự án của tôi.

Tôi đã cài đặt nó bằng lệnh này:

npm install @react-navigation/drawer

Sau đó nhập vào App.js

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

Đây là package.jsonnội dung của tôi :

"@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",

Đây là App.jsnội dung của tôi :

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

Tôi nên nói rằng tôi đã tạo Loginvà SecondPagecác thành phần và khai báo chúng trong một tệp có tênroot.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);

Nhưng tôi đang gặp một lỗi (màn hình sau).

Làm thế nào tôi có thể sửa lỗi này?

index.js

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

Tôi không hiểu những gì bạn đang cố gắng làm bây giờ. Tôi nghĩ rằng bạn muốn thêm một ngăn kéo Navigator.

Vấn đề của bạn là bạn phải sử dụng một container, nhưng bạn có hai và createdStackNavigator có hai tham số, nhưng bạn có ba tham số.

createdStackNavigator (RouteConfigs, StackNavigatorConfig);

Tôi nghĩ rằng cấu trúc điều hướng của bạn nên như sau.

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}

HOẶC LÀ

Vấn đề này có thể là một vấn đề tương thích với phiên bản. React-Navigationvà StackNavigatorcác phiên bản phải được cập nhật.

Bạn đang kết hợp cả React Navigation 4 và React Navigation 5 trong dự án của mình. Nó không hợp lệ.

Phản ứng Navigation 4 gói: react-navigation, react-navigation-stack, react-navigation-drawer, vv

Phản ứng Navigation 5 gói: @react-navigation/native, @react-navigation/stack, @react-navigation/drawer, vv

Thực hiện theo các tài liệu chính thức và sử dụng phiên bản và cú pháp chính xác của các gói https://reactnavlation.org/docs/en/getting-started.html

Về cơ bản xóa mã của bạn trong root.jsvà tạo điều hướng ngăn xếp như ở đây https://reactnavlation.org/docs/en/stack-navigator.html

thử cài đặt: sợi thêm Reac-navigation-stack

và phụ thuộc: sợi thêm phản ứng-bản địa-cử chỉ-xử lý phản ứng-bản địa-phản ứng-màn hình phản ứng-bản địa-màn hình phản ứng-bản địa-an toàn-khu vực-bối cảnh @ Reac-bản địa-cộng đồng / mặt nạ-xem

trong các tuyến đường của bạn: nhập {createStackNavigator} từ 'Reac-navigation-stack';

Nội dung Index.js

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