pabrik native.createnavigator bukan fungsi

Saya akan merancang navigasi Laci di proyek saya.

Saya menginstalnya dengan perintah ini:

npm install @react-navigation/drawer

Kemudian mengimpornya ke App.js

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

Ini adalah package.jsonkonten saya :

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

Ini adalah App.jskonten saya :

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

Saya harus mengatakan bahwa saya sudah membuat Logindan SecondPagekomponen dan menyatakannya dalam file bernamaroot.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);

Tapi saya mendapatkan kesalahan (layar berikut).

Bagaimana saya bisa memperbaikinya?

index.js

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

Saya tidak mengerti apa yang Anda coba lakukan sekarang. Saya pikir Anda ingin menambahkan laci Navigator.

Masalah Anda adalah Anda harus menggunakan satu wadah, tetapi Anda memiliki dua, dan createStackNavigator memiliki dua parameter, tetapi Anda memiliki tiga.

createStackNavigator (RouteConfigs, StackNavigatorConfig);

Saya pikir struktur navigator Anda harus sebagai berikut.

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}

ATAU

Masalah ini dapat menjadi masalah kompatibilitas dengan versi. React-Navigationdan StackNavigatorversi harus terbaru.

Anda menggabungkan React Navigation 4 dan React Navigation 5 di proyek Anda. Itu tidak valid.

Bereaksi Navigasi 4 paket: react-navigation, react-navigation-stack, react-navigation-drawerdll

Bereaksi Navigasi 5 paket: @react-navigation/native, @react-navigation/stack,@react-navigation/drawer dll

Ikuti dokumen resmi dan gunakan versi dan sintaksis paket yang benar https://reactnavigation.org/docs/en/getting-started.html

Pada dasarnya hapus kode Anda root.jsdan buat stack navigator seperti di sini https://reactnavigation.org/docs/en/stack-navigator.html

coba pasang: benang tambahkan reaksi-navigasi-tumpukan

dan dependensi: benang menambahkan reaksi-asli-gesture-handler bereaksi-asli-direanimasi-asli-layar bereaksi-asli-aman-area-konteks @ react-pribumi-komunitas / masked-view

di rute Anda: impor {createStackNavigator} dari 'react-navigation-stack';

Konten Index.js

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