我想使用 react-navigation 在应用程序的页面之间导航，但在特定情况下遇到了麻烦！
我要移动三页。 首先，在第 1 页，也就是我的主页，我要转到第 2 页
在第 2 页之后我想转到第 3 页 所以一切都很顺利。 现在我想从第 3 页转到第 2 页并加载新信息。
但结果是最后一步其实就像返回按钮一样，我无法重新加载页面2并显示新信息。
我按照文档使用this.props.navigation.push ('Details')}
我该如何处理？
【问题讨论】：
标签： android ios reactjs react-native react-navigation
您可以将一个函数从屏幕 2 传递到屏幕 3，然后在后按时调用该函数，在屏幕 2 上执行该函数时，您只需调用任何您想要执行的重新加载操作。
您可以查看this答案寻求帮助。
【讨论】：
你可以通过DeviceEventEmitter获得这个功能
Page2.js
import React from 'react';
import { DeviceEventEmitter } from 'react-native';
export default class page2 extends React.Component {
listeners = {
update: DeviceEventEmitter.addListener('page2Back', (object) => {
//code for reload page
})
}
....
....
}
Page3.js
import React from 'react';
import { DeviceEventEmitter } from 'react-native';
export default class page3 extends React.Component {
//back button tap action
onBackPress() {
DeviceEventEmitter.emit('page2Back', {})
this.props.navigation.goBack()
}
}
【讨论】：
您可以使用 callBack for 来实现：
export default class Page2 extends Component {
onReloadPage(){
//do what you want to update information
}
gotoPage3(){
this.props.navigation.navigate('page3',callBack:this.onReloadPage.bind(this)
}
render() {
return (
<View>
...
</View>
);
}
}
在第 3 页屏幕中，您必须调用此方法，它的工作原理类似于后退事件侦听器
export default class Page3 extends Component {
onGoBack(){
this.props.navigation.state.params.callBack(); //you can also pass param in this method
this.props.navigation.goBack(null);
}
render() {
return (
<View>
...
</View>
);
}
}
【讨论】：
在page 2 中，当您从page 3 回来时获取您从第3 页传递的数据 在_componentFocused 中，我在下面显示了语法。
要进行重新加载您必须将旧数据保存在某个状态，并且当您从page 3 导航返回时，传递的数据必须发生状态更改。
compoentDidFocus 是一个新的生命周期，将很快添加，但可以使用以下语法触发。每次进入 component 时都会调用它。
并且还可以在 if 条件内更改 compoentDidFocus 中的状态。在这种情况下，检查您是否从page 3 到page 2 不是第一次进入page 2。
componentDidMount() {
//paste the below code in componentDidMount
this._componentFocused();
this._sub = this.props.navigation.addListener(
'didFocus',
this._componentFocused
);
}
//paste the below code above render same place we call `componentDidMount`
_componentFocused = () => {
if(// check if you are coming from page 3){
// make the state change with page 3 data
}
}
【讨论】：
import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
让我们分解一下：
this.props.navigation：导航道具被传递到堆栈导航器中的每个屏幕组件（定义）（稍后在“深入的导航道具”中详细介绍）。 navigate('Details')：我们用我们希望将用户移动到的路线的名称来调用导航功能（在导航道具上 - 命名很难！）。 如果我们使用未在堆栈导航器上定义的路由名称调用 this.props.navigation.navigate，则不会发生任何事情。换句话说，我们只能导航到在我们的堆栈导航器上定义的路由——我们不能导航到任意组件。
【讨论】：