pabrik native.createnavigator bukan fungsi


10

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?

masukkan deskripsi gambar di sini

index.js

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

1
Saya memiliki masalah yang sama, jalankan kembali - npm install @ react-navigation / native memecahkan masalah
Liron Sher

Saya sangat menghargainya, Masalah telah dipecahkan, Apakah Anda tahu cara mengubah gaya Drawer? Maksud saya backgroundeColor dan lain-lain ...
roz333

terima kasih @LironSher pembaruan @ react-navigation / native bekerja untuk saya
Hassan

Jawaban:


0

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.


Saya mencoba solusi Anda sekarang, sayangnya itu tidak berhasil
roz333

@ roz333 Apakah kesalahan yang sama terjadi?
Pengembang hong

ya kesalahan yang sama persis
roz333

@ roz333 Bisakah Anda menunjukkan kepada saya file index.js?
Pengembang hong

Tentu ini adalah konten index.js: `` `export * from './login'; ekspor * dari './header'; ekspor * dari './secondpage'; ekspor * dari './footer'; ekspor * dari './thirdpage'; `` `
roz333

15

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


0

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


-1

Konten Index.js

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.