Reactjs 我可以订阅这个.props.navigation.state.params吗?
我想知道在Reactjs 我可以订阅这个.props.navigation.state.params吗?,reactjs,react-native,react-navigation,Reactjs,React Native,React Navigation,我想知道在screenA中是否有一个对象data={}将被动态更改,我可以通过this.props.navigation通过this.props.navigation('screenB',{data})发送这个道具来接收screenB中的更改吗 在screenB中,有一个组件将接收props(nextrops)以通过类似nextrops.navigation.state.param.data的方式获得这些更改 或者有一种方法可以实现这一点?很简单,正如您所说:发送一些数据navigation.n
screenA
中是否有一个对象data={}
将被动态更改,我可以通过this.props.navigation通过this.props.navigation('screenB',{data})
发送这个道具来接收screenB
中的更改吗
在screenB
中,有一个组件将接收props(nextrops)
以通过类似nextrops.navigation.state.param.data的方式获得这些更改
或者有一种方法可以实现这一点?很简单,正如您所说:发送一些数据navigation.navigate('screenB',{data})
,并在screenB中作为navigation.state.params.data
接收
我同意@FurkanO,你可能会显示使用Redux来控制应用程序的所有状态,但对于简单的东西,我认为没有必要
我制作了一个简单的零食演示,向您展示:
下面是一些后续代码:
主屏幕
类主屏幕扩展组件{
状态={
颜色:[“红色”、“蓝色”、“绿色”],
};
render(){
返回(
{this.state.colors.map(color=>{
返回{color};
})}
详细信息屏幕
this.props.navigation.navigate('Details',{colors:this.state.colors})}
/>
);
}
}
详细信息屏幕
class DetailsScreen扩展组件{
状态={
颜色:[],
};
组件willmount(){
this.setState({colors:this.props.navigation.state.params.colors});
}
render(){
返回(
{this.state.colors.map(color=>{
返回{color};
})}
详细信息屏幕
);
}
}
更新
该问题的作者请求更新以添加setTimeout()
,以查看数据出现在另一个屏幕上的确切时刻,因此它将如下所示:
componentWillMount(){
设置超时(()=>{
this.setState({colors:this.props.navigation.state.params.colors});
}, 3000);
}
您可以使用的onWillFocus
of,它会在屏幕导航到时触发
\u willFocus=()=>{
const{navigation}=this.props
const data=navigation.getParam('data',null)
如果(数据!==null){
/*做点什么*/
}
}
/* ... */
渲染(){
返回(
尝试在主屏幕中使用此选项,并在更改颜色之前导航到DetailsScreensetTimeout(()=>{this.setState({colors:['red','blue','black']}},5000)
我需要的是在第二个屏幕中进行更改。我不明白为什么要添加setTimeout()
当我实际获取数据时,在另一个屏幕中获取数据。检查零食:正如我在描述中所说的,我不只是想在另一个屏幕中获取数据。我想在另一个屏幕中接收更改。数据是动态更改的,因此不必返回以获取更改,一旦更改完成,我需要在第二个屏幕中查看它们改变。正如@FurkanO所说,在这种情况下,redux
是我的朋友,但我想知道是否有另一种选择可以避免这个人我不知道你为什么要这么做,我只是增加了超时时间来告诉你,当数据发生变化时,你需要它,再次查看示例,我将更新答案。