native.createnavigator fabrikası bir işlev değil

Projemde bir Çekmece navigasyonu tasarlayacağım.

Bu komutla yükledim:

npm install @react-navigation/drawer

Sonra bunu App.js

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

Bu benim package.jsoniçeriğim:

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

Bu benim App.jsiçeriğim:

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

Şunu söylemeliyim ki, zaten oluşturduğumu Loginve SecondPagebileşenleri oluşturduğumu veroot.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);

Ama bir hata alıyorum (aşağıdaki ekran).

Bunu nasıl düzeltebilirim?

index.js

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

Şimdi ne yapmaya çalıştığını anlamıyorum. Sanırım bir çekmece Navigator eklemek istiyorsun.

Senin sorunun bir konteyner kullanmak zorunda, ama iki var ve createStackNavigator iki parametre var, ama üç tane var.

createStackNavigator (RouteConfigs, StackNavigatorConfig);

Bence navigasyon yapınız aşağıdaki gibi olmalı.

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}

VEYA

Bu sorun sürümle uyumluluk sorunu olabilir. React-Navigationve StackNavigatorsürümler güncel olmalıdır.

Projenizde hem React Navigation 4 hem de React Navigation 5'i birleştiriyorsunuz. Geçerli değil.

Navigasyon 4 paket React: react-navigation, react-navigation-stack, react-navigation-drawervb

Navigasyon 5 paketleri React: @react-navigation/native, @react-navigation/stack, @react-navigation/drawervb

Resmi dokümanları takip edin ve paketlerin doğru sürümünü ve sözdizimini kullanın https://reactnavigation.org/docs/en/getting-started.html

Temel olarak kodunuzu kaldırın root.jsve burada olduğu gibi yığın gezgini oluşturun https://reactnavigation.org/docs/en/stack-navigator.html

yüklemeyi dene: iplik ekle tepki-gezinme yığını

ve bağımlılıklar: iplik ekleme tepki-doğal-jest-işleyici tepki-doğal-yeniden canlandırılmış tepki-doğal-ekranlar tepki-doğal-güvenli-alan-bağlam @ tepki-yerel-topluluk / maskeli görünüm

rotalarınızda: {reaks-navigation-stack "klasöründen {createStackNavigator} dosyasını içe aktarın;

Index.js içeriği

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