[英]Passing state through navigation props
Can someone explain me why this doesn't work as i expect to.I'm trying to navigate from a screen to another using react navigation and i want to pass a value from state from a screen to another(I keep my value from state in Parent Component and also my 2 functions that changes the state value).When I navigate to my Child Component I pass value from state and both functions aswell. 有人可以解释一下为什么这不能像我期望的那样工作。我正在尝试使用反应导航从一个屏幕导航到另一个我希望将一个值从一个屏幕传递到另一个屏幕(我保持我的价值来自状态在父组件和我的2个函数中,它们改变了状态值)。当我导航到我的子组件时,我从状态和两个函数传递值。
The main problem is that i dont see any changes on the child screen when i triggeer the 2 functions, but when i go back to my parent screen, the changes had been made and they are visible on the screen. 主要的问题是当我触发2个功能时,我看不到子屏幕上的任何变化,但是当我回到我的父屏幕时,已经进行了更改,并且它们在屏幕上可见。
I've tried to use this.forceUpdate() but it is still not working. 我试过使用this.forceUpdate()但它仍然无法正常工作。
Any help? 有帮助吗?
This is my parrent component where i keep the state and the functions that change my state 这是我的parrent组件,我保持状态和改变我的状态的功能
import React from 'react';
import { Text, View, TouchableHighlight, Image, ScrollView, FlatList } from 'react-native';
export default class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 2
};
}
incrementValue = () => {
this.setState(prevState => ({
value: prevState.value + 1
}));
};
decrementValue = () => {
this.setState(prevState => ({
value: prevState.value - 1
}));
};
onPressButton = () => {
this.props.navigation.navigate('Child', {
value: this.state.value,
incrementValue: this.incrementValue.bind(this),
decrementValue: this.decrementValue.bind(this)
});
};
render() {
return (
<View>
<Text>parrent component</Text>
<TouchableHighlight onPress={() => this.onPressButton()}>
<Text style={{ color: 'red' }}>go to child</Text>
</TouchableHighlight>
<Text>state value : {this.state.value}</Text>
</View>
);
}
}
And here this is my child component: 这是我的孩子组成部分:
import React from 'react';
import { Text, View, TouchableHighlight, Image, ScrollView, FlatList } from 'react-native';
export default class Child extends React.Component {
constructor(props) {
super(props);
}
onPressIncrement = () => {
this.props.navigation.state.params.incrementValue();
this.forceUpdate();
};
onPressDecrement = () => {
this.props.navigation.state.params.decrementValue();
this.forceUpdate();
};
render() {
const { navigation } = this.props;
const value = navigation.getParam('value');
alert(value);
return (
<View>
<Text>Child component</Text>
<Text>{value}</Text>
<TouchableHighlight onPress={() => this.onPressIncrement()}>
<Text>incrementValue</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressDecrement()}>
<Text>decrementValue</Text>
</TouchableHighlight>
</View>
);
}
}
It is normal. 这是正常的。 You just render your
value
prop only in first call of Child
screen. 您只需在第一次调用
Child
屏幕时渲染您的value
prop。
There is a lifecycle method named ComponentDidUpdate
for your prop changes. 您的prop更改有一个名为
ComponentDidUpdate
的生命周期方法。 It is triggered once one of your prop changes. 一旦你的道具变化,就会触发它。
For example you can use like this in your Child Screen
, 例如,您可以在
Child Screen
使用这样的,
componentDidUpdate(prevProps) {
const value = navigation.getParam('value');
console.log('prevProps', prevProps);
console.log('new value', value);
}
You should see if value state changes in Parent Screen
(which you passed as prop to your Child Screen
) then ComponentDidUpdate
should triggered with new value. 您应该看到
Parent Screen
值状态更改(您作为支持传递到Child Screen
),然后ComponentDidUpdate
应该以新值触发。
Edit: After triggered componentDidUpdate
and access new value. 编辑:触发
componentDidUpdate
并访问新值后。 You can use setState
for trigger render function. 您可以使用
setState
作为触发器渲染功能。
constructor(props) {
super(props);
this.state = {
value: navigation.getParam('value');
}
}
componentDidUpdate(prevProps) {
const value = navigation.getParam('value');
this.setState({ value });
}
render() {
const { navigation } = this.props;
return (
<View>
<Text>Child component</Text>
<Text>{this.state.value}</Text>
<TouchableHighlight onPress={() => this.onPressIncrement()}>
<Text>incrementValue</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressDecrement()}>
<Text>decrementValue</Text>
</TouchableHighlight>
</View>
);
}
Hope it works. 希望它有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.