update

js/components/Quote.js

@@ -1,17 +1,55 @@
 import React, { Component, Fragment } from 'react';
-import { Text } from 'react-native'
+import { Text, StyleSheet } from 'react-native'
 
 export default class Quote extends Component {
     render() {
         const { text, author } = this.props // destructuring
         return (
+
+            // Methode 1
+            /* <Fragment>
+                 <Text style={styleText}>{text}</Text>
+                 <Text style={styleAuthor}>&mdash; {author}</Text>
+             </Fragment>);
+             */
+
+
+            // Methode 2
             <Fragment>
-                <Text style={styleText}>{text}</Text>
+                <Text style={styles.text}>{text}</Text>
-                <Text style={styleAuthor}>&mdash; {author}</Text>
+                <Text style={styles.author}>&mdash; {author}</Text>
             </Fragment>);
+
+
     }
 }
 
+
+
 // Styling in React Native mit JavaScript
+
+// Methode 1
 const styleText = { fontSize: 25, fontWeight: 'bold', color: 'black' };
-const styleAuthor = { fontSize: 17, fontsStyle: 'italic', color: 'red' };
+const styleAuthor = { fontSize: 15, fontsStyle: 'italic', color: 'red' };
+
+
+// Methode 2
+
+// StyleSheet.create({...styles...})
+const styles = StyleSheet.create({
+    text: {
+        fontSize: 25,
+        fontWeight: 'bold',
+        color: 'black',
+        textAlign: 'center',
+        // View Styles
+        borderWidth: 2,
+        borderColor: 'red'
+
+    },
+    author: {
+        fontSize: 15,
+        fontStyle: 'italic',
+        color: 'green'
+    }
+});