如何将值传递到下一个屏幕文本输入字段并更新文本,然后再次按更新按钮,然后返回具有更新值的上一个屏幕。
屏幕:1
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, Text, Image, TouchableOpacity, ScrollView, TextInput, Button } from 'react-native';
// import all basic components
import Screen2 from './screen2';
import Screen1 from './screen1';
// const Drawer = createDrawerNavigator();
export default class Screen3 extends Component {
constructor(props) {
super(props);
this.state = {
noteArray: [],
noteText: '',
}
}
addNote() {
if (this.state.noteText) {
this.state.noteArray.push({
'note': this.state.noteText
})
this.setState({ noteText: ''})
}
}
deleteNote(key) {
this.state.noteArray.splice(key, 1)
this.setState({ noteArray: this.state.noteArray })
}
updateText(noteText) {
this.setState({ noteText: noteText.target.value })
console.log(noteText);
}
receivedValue = (noteText) => {
this.setState({noteText})
}
editText = () => {
this.props.navigation.navigate('EditText', { textVal:this.state.noteText });
}
//Screen1 Component
render() {
let note = this.state.noteArray.map((val, key) => {
return <Screen2 key={key} keyval={key} val={val}
deleteMethod={() => this.deleteNote(key)}
edit={this.editText} />
});
return (
<View style={styles.MainContainer}>
{/* <Text style={{ fontSize: 23 }}> Screen {global.currentScreenIndex + 1} </Text> */}
<ScrollView style={styles.ScrollviewContainer}>
{note}
</ScrollView>
<View style={styles.footer}>
<TextInput
style={styles.TextInput}
onChangeText={(noteText) => this.setState({ noteText })}
value={this.state.noteText}
placeholder='Enter Text Here'
placeholderTextColor='white'
>
</TextInput>
</View>
<TouchableOpacity
activeOpacity={0.7}
onPress={this.addNote.bind(this)}
style={styles.addButton}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</View>
);
}
}
场景2:
- import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, TouchableHighlight, Alert, Button } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
export default class EditText extends Component {
constructor(props) {
super(props);
this.state = {
noteText: '',
}
}
static navigationOptions = {
title: 'Edit',
}
render() {
const { navigation } = this.props;
const paramVal = navigation.getParam('textVal');
const val = this.state.noteText;
return (
<View style={styles.container}>
<TextInput
style={{ height: 40, width: 300, borderColor: 'black', borderWidth: 2 }}
placeholder='Enter Text For Update'
value={JSON.stringify(paramVal)}
onChangeText={(noteText) => this.setState({ noteText })}
>
</TextInput>
<TouchableOpacity style={styles.buttonStyle} onPress={() => {
// Pass params back to home screen
navigation.navigate('Screen3', { post: this.state.noteText })}} >
<Text style={styles.textStyle}>Update</Text>
</TouchableOpacity>
</View>
)
}
}