50 lines
1.5 KiB
JavaScript
50 lines
1.5 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';
|
|
|
|
const data = [
|
|
{ text: "Zitat1", author: "Author 1" },
|
|
{ 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 }; //initialer Zustand
|
|
|
|
// 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 = this.state.index;
|
|
const quote = data[index];
|
|
let nextIndex = index + 1;
|
|
if (nextIndex === data.length) nextIndex = 0;
|
|
let prevIndex = index - 1;
|
|
if (index === 0) prevIndex = data.length - 1;
|
|
return (
|
|
//JSX
|
|
<View style={styles.container}>
|
|
<Quote text={quote.text} author={quote.author} />
|
|
<Button title="Nächstes Zitat" onPress={() => this.setState({ index: nextIndex })} />
|
|
<Button title="Letztes Zitat" onPress={() => this.setState({ index: prevIndex })} />
|
|
<StatusBar style="auto" />
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
//Aussehen und Layout
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#fff',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
});
|