在屏幕之间导航使用react-navigation

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时，它都会被调用。

并且还将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：导航道具被传递到堆栈导航器中的每个屏幕组件（定义）（稍后将在“导航道具深度”中详细介绍）。导航（'详细信息'）：我们使用我们想要将用户移动到的路径的名称调用导航功能（在导航道具上命名很难！）。如果我们使用我们尚未在堆栈导航器上定义的路由名称调用this.props.navigation.navigate，则不会发生任何事情。换句话说，我们只能导航到我们的堆栈导航器上定义的路线 - 我们无法导航到任意组件。