diff --git a/js/components/Quote.js b/js/components/Quote.js index 62cd0d9..9550e7f 100644 --- a/js/components/Quote.js +++ b/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 + /* + {text} + — {author} + ); + */ + + + // Methode 2 - {text} - — {author} + {text} + — {author} ); + + } } + + // Styling in React Native mit JavaScript + +// Methode 1 const styleText = { fontSize: 25, fontWeight: 'bold', color: 'black' }; -const styleAuthor = { fontSize: 17, fontsStyle: 'italic', color: 'red' }; \ No newline at end of file +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' + } +}); \ No newline at end of file