React_Native_Tutorial/js/components/NewQuote.js
2022-01-04 18:05:37 +01:00

49 lines
1.4 KiB
JavaScript

import React, { Component } from 'react';
import { Button, Modal, StyleSheet, TextInput, View } from 'react-native';
export default class NewQuote extends Component {
render() {
return (
//Neuer Screen
<Modal
visible={this.props.visible}
onRequestClose={this.props.onSave}//Wird nur für Android benötigt
animationType='slide'>
<View style={styles.container}>
<TextInput style={styles.textInput} placeholder='Zitat' />
<TextInput style={styles.textInput} placeholder='Autor/in' />
<View style={styles.saveButton}>
<Button
title="Save"
onPress={this.props.onSave} />
</View>
</View>
</Modal>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#eee',
alignItems: 'center', //FlexBox Layout
justifyContent: 'center',
},
saveButton: {
position: 'absolute',
bottom: 5,
},
textInput: {
borderWidth: 1,
borderColor: 'deepskyblue',
borderRadius: 4,
width: '80%', //Breite
marginBottom: 20, // Abstand
fontSize: 20, // Schriftgröße
padding: 10,
height: 50,
}
});