How to pass this.state from one screen to another screen with React Native

1

I'm new to React Native , what I want to do is to get a this.state of screen1 for example and use it on screen2 to print this same this.state . I made a very grotesque example to try to explain:

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    TextInput,
    TouchableHighlight,
} from 'react-native';

export default class Inputs extends Component {
    constructor(props) {
        super(props);

        this.state = {
            //Variáveis de entrada
            num1: 0,
            num2: 0,

            //Variáveis que receberão resultados
            resultadoSoma: 0,
        };

        this.calcularSoma = this.calcularSoma.bind(this);
    }

    //Cálculos
    calcularSoma() {
        let calculoSoma = 0;

        calculoSoma = parseFloat(this.state.num1) + parseFloat(this.state.num2);

        let s = this.state;
        s.resultadoSoma = calculoSoma;
        this.setState(s);
    }

    render() {
        return (
            <View>
                <TextInput
                 onChangeText={num1 => {
                     this.setState({ num1 });
                 }}/>
                <TextInput
                 onChangeText={num2 => {
                     this.setState({ num2 });
                 }}/>
                <TouchableHighlight activeOpacity={0.3} onPress={this.calcularSoma}>
                    <Text style={styles.textoBotaoContinuar}>CALCULAR</Text>
                </TouchableHighlight>

                <Text>RESULTADO: {this.state.resultadoSoma}</Text>
           </View>
        );
    }
}

How do I get this <Text>RESULTADO: {this.state.resultadoSoma}</Text> and show screen 2?

Any help will be of great value.

    
asked by anonymous 30.10.2018 / 12:22

1 answer

1

To move data from one screen to another you can use the react-native-navigation by simply passing the values to the screen you want.

Usage example for this case

Using two components (screens). We would like to pass the ResoutedSoma state from tela1 to tela2

Component passing the value (screen1):

this.props.navigation.navigate('tela2', {resultado: this.state.resutadoSoma})

Component that receives the value (screen2):

this.props.navigation.state.params.resultado
    
30.10.2018 / 17:22