Skip to content

Instantly share code, notes, and snippets.

@behrends

behrends/App.js

Created Jul 4, 2018
Embed
What would you like to do?
13:45 - Modal in Komponente NewQuote
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 }; // initialer Zustand
render() {
let index = this.state.index; // aktueller Zustand
const quote = data[index];
let nextIndex = index + 1;
if (nextIndex === data.length) nextIndex = 0;
return (
// JSX
<View style={styles.container}>
<NewQuote
visible={this.state.showModal}
onRequestClose={() => this.setState({ showModal: false })}
/>
<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'
}
});
// in js/components/ !!!
import React, { Component } from 'react';
import { Modal, StyleSheet, Text, View } from 'react-native';
export default class NewQuote extends Component {
render() {
return (
<Modal
visible={this.props.visible}
onRequestClose={this.props.onRequestClose}
>
<Text style={{ fontSize: 100 }}>MODAL!!!</Text>
</Modal>
);
}
}
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.