This commit is contained in:
marcusferl@web.de 2021-12-29 18:11:32 +01:00
parent 57976bcd72
commit a9ad0114db

View File

@ -1,17 +1,55 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { Text } from 'react-native' import { Text, StyleSheet } from 'react-native'
export default class Quote extends Component { export default class Quote extends Component {
render() { render() {
const { text, author } = this.props // destructuring const { text, author } = this.props // destructuring
return ( return (
<Fragment>
// Methode 1
/* <Fragment>
<Text style={styleText}>{text}</Text> <Text style={styleText}>{text}</Text>
<Text style={styleAuthor}>&mdash; {author}</Text> <Text style={styleAuthor}>&mdash; {author}</Text>
</Fragment>); </Fragment>);
*/
// Methode 2
<Fragment>
<Text style={styles.text}>{text}</Text>
<Text style={styles.author}>&mdash; {author}</Text>
</Fragment>);
} }
} }
// Styling in React Native mit JavaScript // Styling in React Native mit JavaScript
// Methode 1
const styleText = { fontSize: 25, fontWeight: 'bold', color: 'black' }; 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'
}
});