React_Native_Tutorial/App.js

import React, { Component } from 'react'; // Bei React bzw. Nativ immer importieren!
import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, View } from 'react-native';

import Quote from './js/components/Quote'; // Eigene Componente
import NewQuote from './js/components/NewQuote';// Eigene Componente


const data = [
  { text: "Lernen ist Erfahrung. Alles andere ist einfach nur Information.", author: "Albert Einstein" },
  { text: "Zitat2", author: "Author 2" },
  { text: "Zitat3", author: "Author 3" },
  { text: "Zitat4", author: "Author 4" },
  { text: "Zitat5", author: "Author 5" },
];
export default class App extends Component {
  state = { index: 0, showNewQuoteScreen: false, quotes: data }; //initialer Zustand

  // Eigene Methoden mit unterstrich am Anfang
  _addQuote = (text, author) => {

    // 1. weise aktuelle Liste der Zitate (aus state) einer Variable zu
    let { quotes } = this.state;

    // 2. füge neues Zitat an ds Ende der Liste an
    if (text !== null && author !== null) quotes.push({ text, author });


    // 3 aktuallisiere die Liste im Stat


    // NewQuote Ausblenden
    this.setState({ showNewQuoteScreen: false, quotes });
  }

  // Darstellung der Komponente im UI
  // Render wird automatisch ausgeführt:
  // a) Komponente erscheint im Ui (initialer Zustand)
  // b) Zustand ändert sich (state) => this.setstate(...)
  // c) probs sich ändern
  render() {
    let { index, quotes } = this.state;
    const quote = quotes[index];
    let nextIndex = index + 1;
    if (nextIndex === quotes.length) nextIndex = 0;
    let prevIndex = index - 1;
    if (index === 0) prevIndex = quotes.length - 1;
    return (
      //JSX
      <View style={styles.container}>
        <View style={styles.buttonNew}>
          <Button
            title="New"
            onPress={() => this.setState({ showNewQuoteScreen: true })}>
          </Button>
        </View>
        <NewQuote
          visible={this.state.showNewQuoteScreen}
          onSave={this._addQuote} />
        <Quote
          text={quote.text}
          author={quote.author} />
        <View style={styles.buttonNext}>
          <Button
            color='grey'
            title="Nächstes Zitat"
            onPress={() => this.setState({ index: nextIndex })} />
        </View>
        <View style={styles.buttonPrev}>
          <Button
            title="Letztes Zitat"
            onPress={() => this.setState({ index: prevIndex })} />
        </View>
        <StatusBar style="auto" />
      </View>
    );
  }
}

//Aussehen und Layout
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F2F0FF',
    alignItems: 'center', //FlexBox Layout
    justifyContent: 'center',
  },
  buttonNext: {
    position: 'absolute',
    bottom: 50,
  },
  buttonPrev: {
    position: 'absolute',
    bottom: 5,
  },
  buttonNew: {
    position: 'absolute',
    right: 0,
    top: 25,
  }
});