Переход на другой экран не вызывает никакой функции

Question

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

Допустим, у меня в приложении есть этот стек:

• Стек A
• Стек B
• Стек C

Когда я нахожусь в стеке A и в первый раз перейду к стеку B, стек B будет читать componentDidMount () , и здесь я установлю состояние (которое должно подключаться к остальному серверу).вызвать данные из базы данных).

Из стека B я впервые перейду к стеку C и введите тоже, и он отлично работает, прочитав componentDidMount () .Затем я сделал некоторые изменения в стеке C (пример: удаление данных), которые повлияют на данные в стеке B.

Теперь я из стека C и вернусь к стеку B (введите во второй раз), но этобольше не будет читать componentDidMount () .И так, мои данные не будут обновляться, пока я не потяну экран, чтобы обновить его.

Как мне сделать так, чтобы экран мог читать componentDidMount () каждый раз, когда вход вэкран?

Answer 1

Это то, что делает стековый навигатор, он хочет снова загрузить весь экран.

Он просто хранит все для вас, так что когда вы вернетесь назад, все будет там, в каком бы состоянии вы не покинули экран.

Например, вы прокрутили до половины на определенном экране и перешли на другой экран, теперь вы вернулись, и вы увидите, что ваш экран наполовину прокручен там, где вы оставили.

, поэтому он ничего не сделает, когда вы вернетесь.

Примечание: Если экран перемещается в прошлом и существует в текущем стеке, то повторный переход к экрану не вызовет никаких методов жизненного цикла.

Так что для вашего случая,

Вы можете передать ссылку на метод в параметрах навигации.и вызовите его, прежде чем переходить.

вот так,

, скажем, вы находитесь на экране B и хотите вызвать метод methodSuperCool=()=>{...}, который находится в screenA, с которого вы перешли на текущий экран.

для этого вам нужно будет передать ссылку на метод в параметрах при переходе к screenB с экрана A.

this.props.navigation.navigate('screenB',{methodSuperCool:this.methodSuperCool});
//this to be write in screenA

теперь на экране B, прежде чем навигация к экрану A вызовет это,

 this.props.navigation.state.params.methodSuperCool() // this can also have params if you like to pass
 this.props.navigation.navigate('screenA') // or goBack() method will also work

Answer 2

Переход назад из стека C в стек B не вызовет componentDidMount (), поскольку компоненты были уже смонтированы при первом создании стека B.

, который вы можете сделать, это сбросить стек навигации при переходе из стека B в стекC подобным образом

const stackCAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'StackC' })],
});

отправка с примечанием

this.props.navigation.dispatch(stackCAction);

возврат назад невозможен при этом.

поочередно вы можете передать функцию обратного вызова из стека B в стекC для обновления.

Проверьте ссылку для полного ответа.

Answer 3

В этом случае вам нужно прослушать NavigationEvents , потому что компоненты уже смонтированы, но каждый раз будет вызываться didFocus.

Вот пример кодаиз документов:

import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';

const MyScreen = () => (
  <View>
    <NavigationEvents
      onWillFocus={payload => console.log('will focus',payload)}
      onDidFocus={payload => console.log('did focus',payload)}
      onWillBlur={payload => console.log('will blur',payload)}
      onDidBlur={payload => console.log('did blur',payload)}
    />
    {/* 
      Your view code
    */}
  </View>
);

export default MyScreen;