Kapitel 9 - StackNavigator

Korrekturen

Wenn react-navigation mit npm im Projektordner von MyJournal installiert wird, dann handelt es sich jetzt um Version 3 der Navigationsbibliothek. Um einen Stacknavigator zu verwenden, muss in AppNavigator.js der entsprechende Import aus react-navigation angepasst werden:

import {
  createAppContainer,
  createBottomTabNavigator,
  createStackNavigator
} from 'react-navigation';

Um einen Stack zu erzeugen, muss nun die Funktion createStackNavigator in AppNavigator.js aufgerufen werden (anstatt StackNavigator):

const AppNavigator = createStackNavigator({
// ... usw. ...

Für das Styling der Kopfleiste im StackNavigator muss nun navigationOptions mit defaultNavigationOptions ersetzt werden (die anderen navigationOptions bleiben unverändert):

const AppNavigator = createStackNavigator(
  {
    Home: {
  
    // ... usw. ...
    
    Edit: EditScreen
  },
  {
    defaultNavigationOptions: {
      headerTintColor: 'deepskyblue',
    
    // ... usw. ...
  }
);

Am Ende der Datei AppNavigator.js muss AppNavigator mit createAppContainer umgeben und wie folgt exportiert werden:

export default createAppContainer(AppNavigator);

Code

StackNavigator mit einfacher Detailansicht einbinden: AppNavigator.js, ItemScreen.js, JournalScreen.js, JournalItems.js, JournalItemRow.js und JournalItemInput.js

Styling der Kopfleiste: AppNavigator.js und JournalItems.js

Detailansicht mit Tagebucheintrag (Text und Foto): JournalItems.js, JournalScreen.js und ItemScreen.js

Navigation von der Fotogalerie zu einem Eintrag: PhotosScreen.js

Editor: EditScreen.js, AppNavigator.js und JournalScreen.js

Eintrag bearbeiten: ItemScreen.js und App.js

Wetterdaten und Standort im Editor anfragen: EditScreen.js