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

时间:2019-02-14 09:20:58

标签: android ios reactjs react-native react-navigation

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

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

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

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

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

我该如何处理?

5 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

page 2中,当您从page 3返回时,_componentFocused的格式获取从第3页传递的数据,如下所示。

要使重新加载发生,您必须已将旧数据保存为某种状态,并且当您从page 3导航回去时,传递的数据必须发生状态更改。

compoentDidFocus是一个新的生命周期,很快就会添加,但是可以通过以下语法触发。每次进入component时,它将被调用。

,还可以在if条件内的compoentDidFocus中进行状态更改。在这种情况下,请检查您是否从page 3page 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
             }
        }

答案 4 :(得分:0)

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