如何将值传递到下一个屏幕

时间:2020-05-21 09:01:43

标签: reactjs react-native

如何将值传递到下一个屏幕文本输入字段并更新文本,然后再次按更新按钮,然后返回具有更新值的上一个屏幕。

屏幕: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>
                   )
               }
           }

0 个答案:

没有答案