Перемещайтесь между экранами, используя реагирующую навигацию

Question

Я хочу использовать реагировать на навигацию для навигации по страницам приложения, но у меня возникли проблемы в конкретном случае!

У меня тристраницы, которые я хочу перемещать.Прежде всего, на странице 1, которая является моей домашней страницей, я хочу перейти на страницу 2

После страницы 2 я хочу перейти на страницу 3 Так что все идет хорошо.Теперь я хочу перейти со страницы 3 на страницу 2 с загрузкой новой информации.

Но происходит то, что последний шаг на самом деле похож на кнопку возврата, и я не могу перезагрузить страницу 2 и отобразить новую информацию.

Я проследовал за документом и пользуюсь this.props.navigation.push ('Details')}

как мне с ним справиться?

Answer 1

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 с именем маршрута, которое мы не определили в навигаторе стека, ничего не произойдет.Иными словами, мы можем переходить только к маршрутам, которые были определены в нашем стековом навигаторе - мы не можем перейти к произвольному компоненту.

Answer 2

В page 2, когда вы возвращаетесь с page 3 , получите данные, которые вы передали со страницы 3 в _componentFocused синтаксис, который я показал ниже.

Для перезагрузкичтобы произойти вы должны были сохранить старые данные в каком-то состоянии, и когда вы вернетесь назад от page 3, должно произойти изменение состояния с переданными данными .

A compoentDidFocus - это новая жизньцикл будет добавлен в ближайшее время, но может быть запущен с помощью приведенного ниже синтаксиса. Он будет вызываться каждый раз, когда мы переходим в component.

, а также вносить изменения в 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 3

Вы можете получить эту функцию с помощью 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 4

Вы можете использовать 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 5

Вы можете передать функцию с экрана 2 на экран 3 и вызвать эту функцию при повторном нажатии, а при реализации этой функции на экране 2 вы просто вызываете все, что хотите сделать для перезагрузки.

Вы можетеотметьте этот ответ для помощи.