#h1-Tutorial react-native Drawer-Navigation-h1#....
#h3-Einrichtung eines Drawer-Routers in React-Native-h3#....
#hr#....
#sup-Das ist ein kurzes Tutorial über Drawer-Navigation, hier habe ich um es
einfach zu halten Details wie
Farbgebung gänzlich weg gelassen, ebenfalls wird angenommen, daß das Betriebssystem mit NodeJs
installiert und funktionsfähig ist: -sup# ....
Das neue Projekt wird im Terminal initialisiert:........
#cmd-npx @react-native-community/cli@latest init mynewproject-cmd#........
Nach diesem Befehl würde man sehen, daß die Module
angelegt werden, nun können wir in den neu angelegten Projektordner wechseln,
VsCode starten und als erstes die Datei ''App.tsx'' erstmal von überflüßigem
Code befreien:....
....
#D-....
import React from 'react';....
import {Text } from 'react-native';....
....
function App() { ....
return (....
<Text>Hello World</Text>....
);....
}....
....
export default App;
-D#....
Danach starten wir das Metro-Engine mit dem Befehl:
#cmd-npm start-cmd#,
welches uns dann einige Optionen anbietet.
Wenn wir hier die Taste 'a' drücken sehen wir die Ausgabe des Codes, im Android
Gerät, oder Virtuelles-Gerät je nach dem was wir verwenden.
Die Ausgebe in unserem Fall sollte sein: 'Hello World'........
Hier müssen wir einige Abhängigkeiten noch mit dem NodeJs Packetmanager installieren: ....
....
#cmd-yarn add @react-navigation/drawer-cmd#....
#cmd-yarn add @react-navigation/native-cmd#....
#cmd-yarn add react-native-gesture-handler-cmd#....
#cmd-yarn add react-native-screens-cmd#....
#cmd-yarn add react-native-safe-area-context-cmd#....
#cmd-yarn add react-native-reanimated-cmd#....
....
Danach können wir zunächst die Seiten erstellen die aus dem Drawer-Navigator
aufgerufen werden sollen. ....
Ich habe hier als Beispiel 'HomeScreen' und 'ProfileScreen' gewählt:
#D-function HomeScreen() {....
return(....
<View>....
<Text>home screen</Text>....
</View>....
}-D#....
#D-
function ProfileScreen() {....
return(....
<View>....
<Text>profile screen</Text>....
</View>....
);....
}....
-D#....
#sup- ( in einem produktiven Projekt würde man die Screens als Module
auslagern, hier lassen wir sie wegen der Übersichlichkeit erstmal hier ) --sup#
Anschließend müssen wir die Datei 'babel.config.js' modifizieren und hier
das installierte Plugin 'react-native-reanimated/plugin' angeben:
#D-....
module.exports = {....
presets: [.... ],....
plugins: [....
'react-native-reanimated/plugin',....
],....
};....
-D#
#sup-#b-`react-native-reanimated/plugin` muss dabei der letzte Eintrag sein (!!!)-b#-sup#....
Dann wechseln wir wieder zu App.tsx Datei und instanzieren das Erstellungsmodul des Drawers:....
#D-
import { createDrawerNavigator } from '@react-navigation/drawer';....
import { createStaticNavigation } from '@react-navigation/native';....
import 'react-native-gesture-handler';....
....
const Drawer = createDrawerNavigator({....
screens: {....
Home: HomeScreen,....
Profile: ProfileScreen,....
},....
});........
-D#........
Das Modul setzen wir im App root ab:
#D-
const Navigation = createStaticNavigation(Drawer);....
....
function App() {....
return(....
<Navigation/>....
);....
}....
-D#
So erhalten wir unsere Navigation: ....
#vidwebm-#src-./docs/drawer.webm-src#-vidwebm#....
Ich hoffe diese Anleitung war etwas hilfreich, wie bereits angedeutet hier fehlt
das Styling gänzlich, daher müsste z.B. bei dem verwendeten Ausgabe-Gerät das helle Thema gewählt sein, sonst würde man die dunkle Schrift auf dem dunklen Hintergrund gar nicht erkennen.
........
Andy Gaal....
ycom1 Blogabout ycom1 DE
