102 lines
2.9 KiB
JavaScript
102 lines
2.9 KiB
JavaScript
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,
|
|
}
|
|
});
|