weifer/React_Native_Tutorial
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
marcusferl 2022-01-21 23:54:30 +01:00
parent 756da80e10
commit 518478b576
3 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
App.js
View File

@ -14,12 +14,23 @@ const data = [
{ text: "Zitat5", author: "Author 5" }, { text: "Zitat5", author: "Author 5" },
]; ];
export default class App extends Component { export default class App extends Component {
state = { index: 0, showNewQuoteScreen: false }; //initialer Zustand state = { index: 0, showNewQuoteScreen: false, quotes: data }; //initialer Zustand
// Eigene Methoden mit unterstrich am Anfang // Eigene Methoden mit unterstrich am Anfang
_addQuote = () => { _addQuote = (text, author) => {
// 1. weise aktuelle Liste der Zitate (aus state) einer Variable zu
let { quotes } = this.state;
// 2. füge neues Zitat an ds Ende der Liste an
if (text !== null && author !== null) quotes.push({ text, author });
// 3 aktuallisiere die Liste im Stat
// NewQuote Ausblenden // NewQuote Ausblenden
this.setState({ showNewQuoteScreen: false }); this.setState({ showNewQuoteScreen: false, quotes });
} }
// Darstellung der Komponente im UI // Darstellung der Komponente im UI
@ -28,12 +39,12 @@ export default class App extends Component {
// b) Zustand ändert sich (state) => this.setstate(...) // b) Zustand ändert sich (state) => this.setstate(...)
// c) probs sich ändern // c) probs sich ändern
render() { render() {
let index = this.state.index; let { index, quotes } = this.state;
const quote = data[index]; const quote = quotes[index];
let nextIndex = index + 1; let nextIndex = index + 1;
if (nextIndex === data.length) nextIndex = 0; if (nextIndex === quotes.length) nextIndex = 0;
let prevIndex = index - 1; let prevIndex = index - 1;
if (index === 0) prevIndex = data.length - 1; if (index === 0) prevIndex = quotes.length - 1;
return ( return (
//JSX //JSX
<View style={styles.container}> <View style={styles.container}>

13
js/components/NewQuote.js
View File

@ -4,13 +4,16 @@ import { Text, Button, Modal, StyleSheet, TextInput, View } from 'react-native';
export default class NewQuote extends Component { export default class NewQuote extends Component {
state = { content: null, author: null } //Inizialer Zustand state = { content: null, author: null } //Inizialer Zustand
render() { render() {
const { visible, onSave } = this.props; // Einfachere strukturierung const { visible, onSave } = this.props; // Einfachere strukturierung, ansonsten z.b this.probs.onSave
const { content, author } = this.state; const { content, author } = this.state;
return ( return (
//Neuer Screen //Neuer Screen
<Modal <Modal
visible={visible} visible={visible}
onRequestClose={onSave} //Wird nur für Android benötigt onRequestClose={() => {
this.setState({ content: null, author: null });
onSave(null, null);
}} //Wird nur für Android benötigt
animationType='slide'> animationType='slide'>
<View style={styles.container}> <View style={styles.container}>
<TextInput <TextInput
@ -29,7 +32,11 @@ export default class NewQuote extends Component {
style={styles.saveButton}> style={styles.saveButton}>
<Button <Button
title="Save" title="Save"
onPress={() => onSave(content, author)} /> onPress={() => {
this.setState({ content: null, author: null });
onSave(content, author);
}
} />
</View> </View>
</View> </View>
</Modal> </Modal>

1
js/components/Quote.js
View File

@ -7,6 +7,7 @@ export default class Quote extends Component {
return ( return (
// Methode 1 // Methode 1
/* <Fragment> /* <Fragment>
<Text style={styleText}>{text}</Text> <Text style={styleText}>{text}</Text>
<Text style={styleAuthor}>&mdash; {author}</Text> <Text style={styleAuthor}>&mdash; {author}</Text>