Question

我想使用 react-navigation 在应用程序的页面之间导航，但是在特定情况下遇到了麻烦！

我想走动三页。首先，在我的主页第1页上，我想转到第2页

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

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

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

我该如何处理？

Answer 1

您可以将一个功能从屏幕2传递到屏幕3，然后在按下时调用该功能，而在屏幕2的该功能的实现中，您只需调用要重新加载的任何内容即可。

您可以查看this的答案以寻求帮助。

Answer 2

您可以使用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()
    }
}

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 2中，当您从page 3返回时，以_componentFocused的格式获取从第3页传递的数据，如下所示。

要使重新加载发生，您必须已将旧数据保存为某种状态，并且当您从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
             }
        }

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：将导航道具传递到堆栈导航器中的每个屏幕组件（定义）（有关更多信息，请参见“深入的导航道具”）。 navigation（'Details'）：我们调用导航功能（在导航道具上–很难命名！），其名称为我们要将用户移动到的路线的名称。如果我们使用尚未在堆栈导航器上定义的路由名称调用this.props.navigation.navigate，则不会发生任何事情。换句话说，我们只能导航到在堆栈导航器上定义的路由，而不能导航到任意组件。

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

5 个答案: