屏幕之间的导航使用反应导航

Question

我想使用反应导航在应用程序的页面之间导航，但在特殊情况下遇到了麻烦！

我有三页想要移动。 首先，在第 1 页，也就是我的主页上，我想转到第 2 页

在第 2 页之后，我想转到第 3 页 所以一切都很顺利。 现在我想从第 3 页转到第 2 页并加载新信息。

但是发生的情况是，最后一步实际上就像后退按钮一样，我无法重新加载第 2 页并显示新信息。

我遵循了文档并使用this.props.navigation.push ('Details')}

我该如何处理？

Answer 1

您可以将函数从屏幕 2 传递到屏幕 3，并在按背时调用该函数，在屏幕 2 的函数实现中，您只需调用您想要重新加载的任何操作。

您可以查看此答案以获取帮助。

Answer 2

您可以使用DeviceEventEmitter

页2.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
})
}
....
....
}

页3.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()
}
}

Answer 3

您可以使用 callBack 来实现这一点：

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>
);
}
}

在Page3屏幕中，您必须调用此方法，该方法的工作方式类似于反向事件侦听器

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>
);
}
}

Answer 4

当你回来时page 3page 2获取你从第 3 页传递的数据，_componentFocused我在下面显示的语法。

要进行重新加载，您必须已将旧数据保存在某种状态下，并且当您从page 3导航回来时，必须对传递的数据进行状态更改。

compoentDidFocus是一个新的生命周期，很快就会添加，但可以使用以下语法触发。每次我们搬进component时都会调用它。

并且还要在 if 条件内compoentDidFocus更改状态。 在那个 if 条件检查您是否来自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
}
}

Answer 5

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.naving，则不会发生任何事情。换句话说，我们只能导航到在堆栈导航器上定义的路由 — 我们不能导航到任意组件。