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

지금하려는 일을 이해하지 못합니다. 서랍 네비게이터를 추가하고 싶다고 생각합니다.

문제는 하나의 컨테이너를 사용해야하지만 두 개가 있고 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하고 https://reactnavigation.org/docs/en/stack-navigator.html 과 같은 스택 탐색기를 만듭니다.

설치 시도 : 얀 추가 반응 탐색 스택

그리고 의존성 : 얀은 반응 네이티브 제스쳐 핸들러 반응 네이티브 리 네이티브 반응 네이티브 스크린 추가 반응 네이티브 안전 영역 컨텍스트 @ 반응 네이티브 커뮤니티 / 마스크 뷰

경로에서 : import {createStackNavigator} from 'react-navigation-stack';

Index.js 컨텐츠

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