如何使用redux显示变量的状态?

时间:2019-01-03 14:33:36

标签: reactjs react-native redux react-redux

我是redux的新手,我用react-native保存变量状态,但是我意识到它是不可持续的,所以我想开始使用它,但是我不知道如何发送我的状态变量到另一个屏幕,并显示我停留的最后状态 我通过textInput获得的变量的值

class Screen1 extends Component {

    constructor(props) {
        super(props);
        this.state = {
            text: '',
            percentage: ''
        };
    }
    static navigationOptions = ({ navigation }) => {
        return {
            headerLeft: (
                <View style={ { flexDirection: 'row', justifyContent: 'center', alignItems: 'center' } }>
                    <AntDesign
                        name="left"
                        color="rgba(0,0,0,0.5)"
                        size={ 30 }
                        style={ { marginLeft: 5 } }
                    />
                    <Text style={ { marginLeft: 20, color: '#000', fontSize: 17, fontWeight: 'bold' } }>Crear regalo</Text>
                </View>
            ),
            headerRight: (
                <View>
                    <TouchableOpacity
                        disabled={ navigation.getParam('isDisable') } // get value from params and pass it to disabled props
                        onPress={ () => navigation.navigate('2') }
                        style={ styles.Btn }>
                        <Text style={ styles.TxtBtn }>Siguiente</Text>
                    </TouchableOpacity>
                </View>
            ),
        }
    };
    // set by a default value in componentDidMount to make the next button disable initially
    componentDidMount() {
        Alert.alert('Advertencia', 'Ingrese el porcentaje de su descuento');
        this.props.navigation.setParams({ isDisable: true });
    }
    Change = (text) => {
        //when text length is greater than 0 than next button active otherwise it will be disable
        let isDisable = text.length > 0 ? false : true
        //set value in the state
        this.setState({ text: text })
        // set value to params
        this.props.navigation.setParams({ isDisable: isDisable });
    }
    render() {
        return (
            <View style={ styles.container }>
                <View style={ styles.Box }>
                    <ImageBackground source={ require('../Icons/Regalo.png') } style={ styles.Image }>
                        <View style={ styles.ContainerInput }>
                            <TextInput
                                style={ { textAlign: 'center', color: '#fff', fontSize: 40, } }
                                type="numeric"
                                placeholder="%"
                                value={ this.state.text } //set value from state
                                onChangeText={ this.Change } />
                            <Text style={ { fontSize: 40, color: '#fff', textAlign: 'center' } }>
                                { this.state.text.split(' ').map((word) => word && '%').join(' ') }
                            </Text>
                        </View>
                    </ImageBackground>
                </View>
            </View>
        );
    }
}

export default Screen1;

我的屏幕3:

我希望屏幕1上的变量“文本”的状态在屏幕3上显示。

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet
} from "react-native";

class Screen3 extends Component {
    render() {
        return (
            <View style={ styles.container }>
                <Text>{ #showthevariable}</Text>
            </View>
        );
    }
}
export default Screen3;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

0 个答案:

没有答案