diff --git a/App.js b/App.js
index 2cd8564..0104d82 100644
--- a/App.js
+++ b/App.js
@@ -1,6 +1,6 @@
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';
+import { Button, StyleSheet, View } from 'react-native';
import Quote from './js/components/Quote';
@@ -15,19 +15,23 @@ export default class App extends Component {
state = { index: 0 }; //initialer Zustand
// Darstellung der Komponente im UI
- // Render wird automatisch ausgeführt
+ // 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
);
diff --git a/js/components/Quote.js b/js/components/Quote.js
index 9758127..62cd0d9 100644
--- a/js/components/Quote.js
+++ b/js/components/Quote.js
@@ -3,10 +3,15 @@ import { Text } from 'react-native'
export default class Quote extends Component {
render() {
+ const { text, author } = this.props // destructuring
return (
- {this.props.text}
- {this.props.author}
+ {text}
+ — {author}
);
}
-}
\ No newline at end of file
+}
+
+// Styling in React Native mit JavaScript
+const styleText = { fontSize: 25, fontWeight: 'bold', color: 'black' };
+const styleAuthor = { fontSize: 17, fontsStyle: 'italic', color: 'red' };
\ No newline at end of file