45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
|
import React, { Component } from 'react'; // Bei React bzw. Nativ immer importieren!
|
||
|
|
import { StatusBar } from 'expo-status-bar';
|
||
|
|
import { Button, StyleSheet, Text, View } from 'react-native';
|
||
|
|
|
||
|
|
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(...)
|
||
|
|
render() {
|
||
|
|
let index = this.state.index;
|
||
|
|
const quote = data[index];
|
||
|
|
let nextIndex = index + 1;
|
||
|
|
if (nextIndex === data.length) nextIndex = 0;
|
||
|
|
return (
|
||
|
|
//JSX
|
||
|
|
<View style={styles.container}>
|
||
|
|
<Text>{quote.text}</Text>
|
||
|
|
<Text>-- {quote.author}</Text>
|
||
|
|
<Button title="Nächstes Zitat" onPress={() => this.setState({ index: nextIndex })} />
|
||
|
|
<StatusBar style="auto" />
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//Aussehen und Layout
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
},
|
||
|
|
});
|