Kapitel 8 - Navigation mit Tabs
Korrekturen
Wenn react-navigation
mit npm im Projektordner von MyJournal
installiert wird, dann handelt es
sich jetzt um Version 3 der Navigationsbibliothek. Um eine Tableiste zu verwenden, muss in AppNavigator.js
der entsprechende Import aus react-navigation
angepasst werden:
import {
createAppContainer,
createBottomTabNavigator
} from 'react-navigation';
Um eine Tableiste zu erzeugen, muss nun die Funktion createBottomTabNavigator
in AppNavigator.js
aufgerufen werden (anstatt TabNavigator
):
const Tabs = createBottomTabNavigator({
// ... usw. ...
Am Ende der Datei AppNavigator.js
muss Tabs
mit createAppContainer
umgeben
und wie folgt exportiert werden:
export default createAppContainer(Tabs);
Code
Tableiste mit drei Screens einbinden: App.js, AppNavigator.js, JournalScreen.js, PhotosScreen.js und SettingsScreen.js
Einheitliche Darstellung der Tableiste in Android und iOS: AppNavigator.js
Screens für die Fotogalerie und Einstellungen: PhotosScreen.js und SettingsScreen.js
Übungen
In der Fotogalerie die ScrollView
durch eine FlatList
ersetzen:
PhotosScreen.js