我是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'
}
});