native.createnavigator factory ist keine Funktion

10

Ich werde in meinem Projekt eine Schubladen-Navigation entwerfen.

Ich habe das mit diesem Befehl installiert:

npm install @react-navigation/drawer

Dann importierte das in App.js

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

Das ist mein package.jsonInhalt:

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

Das ist mein App.jsInhalt:

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

Ich sollte sagen, dass ich bereits Komponenten erstellt Loginund SecondPagein einer Datei mit dem Namen deklariert haberoot.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);

Aber ich erhalte eine Fehlermeldung (folgender Bildschirm).

Wie kann ich das beheben?

Geben Sie hier die Bildbeschreibung ein

index.js

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';
roz333
quelle
1
Ich hatte das gleiche Problem, erneut ausführen - npm install @ react-navigation / native hat das Problem gelöst
Liron Sher
Ich weiß das wirklich zu schätzen. Das Problem wurde behoben. Wissen Sie, wie Sie den Schubladenstil ändern können? Ich meine backgroundeColor und so weiter ...
roz333
danke @LironSher update @ react-navigation / native hat für mich gearbeitet
Hassan jan

Antworten:

0

Ich verstehe nicht, was Sie jetzt versuchen. Ich denke, Sie möchten einen Schubladen-Navigator hinzufügen.

Ihr Problem ist, dass Sie einen Container verwenden müssen, aber zwei, und createStackNavigator zwei Parameter hat, aber drei.

createStackNavigator (RouteConfigs, StackNavigatorConfig);

Ich denke, Ihre Navigatorstruktur sollte wie folgt aussehen.

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}

ODER

Dieses Problem kann ein Kompatibilitätsproblem mit der Version sein. React-Navigationund StackNavigatorVersionen müssen aktuell sein.

Hong Entwickler
quelle
Ich habe Ihre Lösung jetzt ausprobiert, leider hat sie nicht funktioniert
roz333
@ roz333 Tritt der gleiche Fehler auf?
Hong Entwickler
ja genau der gleiche Fehler
roz333
@ roz333 Kannst du mir die Datei index.js zeigen?
Hong Entwickler
Sicher ist dies der Inhalt von index.js: `` `export * from './login'; export * from './header'; export * from './secondpage'; export * from './footer'; export * from './thirdpage'; `` `
roz333
14

Sie kombinieren in Ihrem Projekt sowohl React Navigation 4 als auch React Navigation 5. Es ist nicht gültig.

Reagieren Navigation 4 Pakete: react-navigation, react-navigation-stack, react-navigation-drawerusw.

Reagieren Navigation 5 Pakete: @react-navigation/native, @react-navigation/stack, @react-navigation/drawerusw.

Befolgen Sie die offiziellen Dokumente und verwenden Sie die korrekte Version und Syntax der Pakete https://reactnavigation.org/docs/en/getting-started.html

Entfernen Sie im Grunde Ihren Code in root.jsund erstellen Sie einen Stack-Navigator wie hier https://reactnavigation.org/docs/en/stack-navigator.html

satya164
quelle
0

versuchen Sie zu installieren: Garn hinzufügen React-Navigation-Stack

und Abhängigkeiten: Garn hinzufügen React-Native-Gesten-Handler React-Native-Reanimated React-Native-Bildschirme React-Native-Safe-Area-Kontext @ React-Native-Community / Masked-View

in Ihren Routen: importieren Sie {createStackNavigator} von 'react-navigation-stack';

Gabriel Scalici
quelle
-1

Index.js Inhalt

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