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.json
Inhalt:
"@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.js
Inhalt:
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 Login
und SecondPage
in 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?
index.js
export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';
Antworten:
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.
Ich denke, Ihre Navigatorstruktur sollte wie folgt aussehen.
Drawers.js
App.js.
index.js
ODER
quelle
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-drawer
usw.Reagieren Navigation 5 Pakete:
@react-navigation/native
,@react-navigation/stack
,@react-navigation/drawer
usw.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.js
und erstellen Sie einen Stack-Navigator wie hier https://reactnavigation.org/docs/en/stack-navigator.htmlquelle
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';
quelle
Index.js Inhalt
quelle