Skip to content

Instantly share code, notes, and snippets.

@behrends

behrends/App.js

Created Jul 4, 2018
Embed
What would you like to do?
14:10 - Zitat der Liste hinzufügen
import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import Quote from './js/components/Quote';
import NewQuote from './js/components/NewQuote';
const data = [
{
text:
'Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind.',
author: 'Albert Einstein'
},
{
text:
'Man braucht nichts im Leben zu fürchten, man muss nur alles verstehen.',
author: 'Marie Curie'
},
{ text: 'Nichts ist so beständig wie der Wandel.', author: 'Heraklit' }
];
export default class App extends Component {
state = { index: 0, showModal: false, quotes: data }; // initialer Zustand
addQuote(text, author) {
let quotes = this.state.quotes;
quotes.push({ text: text, author: author });
this.setState({ quotes: quotes, showModal: false });
}
render() {
let index = this.state.index; // aktueller Zustand
const quote = this.state.quotes[index];
let nextIndex = index + 1;
if (nextIndex === this.state.quotes.length) nextIndex = 0;
return (
// JSX
<View style={styles.container}>
<NewQuote
visible={this.state.showModal}
onRequestClose={() => this.setState({ showModal: false })}
onPressDone={(text, author) => this.addQuote(text, author)}
/>
<Quote text={quote.text} author={quote.author} />
<View style={{ marginBottom: 10 }}>
<Button
title="Neues Zitat"
onPress={() => this.setState({ showModal: true })}
/>
</View>
<Button
title="Nächstes Zitat"
onPress={() => this.setState({ index: nextIndex })}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
}
});
import React, { Component } from 'react';
import { Button, Modal, StyleSheet, Text, TextInput, View } from 'react-native';
export default class NewQuote extends Component {
state = { text: null, author: null };
render() {
return (
<Modal
visible={this.props.visible}
onRequestClose={this.props.onRequestClose}
>
<View style={styles.container}>
<TextInput
style={[styles.input, { height: '25%' }]}
placeholder="Zitat eingeben"
underlineColorAndroid="transparent"
onChangeText={text => this.setState({ text: text })}
/>
<TextInput
style={styles.input}
placeholder="Autor"
underlineColorAndroid="transparent"
onChangeText={text => this.setState({ author: text })}
/>
<Button
title="Fertig"
onPress={() =>
this.props.onPressDone(this.state.text, this.state.author)
}
/>
</View>
</Modal>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
paddingTop: 40
},
input: {
fontSize: 20,
borderWidth: 1,
borderColor: 'deepskyblue',
borderRadius: 4,
height: 50,
width: '80%',
marginBottom: 20,
padding: 10
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.