componentDidMount не работает при перенаправлении на экран

Question

У меня есть componentDidMount для вывода списка файлов (изображений) на экране A, с этого экрана у AI есть еще одна ссылка на экран B, где я могу видеть подробный вид файла, и там у меня есть возможность удалитьdocument.

Когда экран A вызывается с использованием

  <TouchableOpacity style={Styles.HomeButton} onPress={ () => this.props.navigation.navigate('Gallery')}>
     <Text style={Styles.HomeButtonText}>View Photos</Text>
  </TouchableOpacity>

componentDidMount, работает нормально, но когда я удаляю файл (я использую реагировать-native-fs) при обратном вызове unlink, явызывая навигацию как

this.props.navigation.navigate('Gallery');

, которая работает нормально, перенаправляя на экран A, но componentDidMount не работает, что означает, что я все еще вижу этот удаленный файл в списке.то есть экран А не обновляется, есть ли какое-нибудь возможное решение?

Answer 1

Вы можете проверить API NavigationEvents здесь: https://reactnavigation.org/docs/en/navigation-events.html.

Для решения вашей проблемы вы хотите использовать навигационное событие onDidFocus вместо componentDidMount!

Это более простой способ, чем использовать императивный API, поскольку он заботится о подписке и отписке подписчиков.

Answer 2

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

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

this.focusListner = this.props.navigation.addListener("didFocus",() => {
  // Update your data
});

Не забудьте удалить прослушиватели событий при размонтировании компонента.

componentWillUnmount() {
    // remove event listener
    this.focusListner.remove();
}

Answer 3

Вы должны обновить свой список на событии didFocus навигации.Понятно, что если вы используете стековую навигацию с A -> B, и когда вы удаляете свой файл из B и возвращаетесь к A, при условии, что A уже находится в стеке, поэтому didMount не будет работать при переходе назад.

Итак, в идеале вы должны обновить свой список в событии didFocus навигации, используя какой-либо флаг, установленный в приставке, когда вы удаляете файл и когда вы возвращаетесь к A, вы читаете статус флага и обновляетеваш список соответственно.

Вы можете обратиться к этому , чтобы лучше понять реквизиты navigation и события жизненного цикла

Answer 4

Возможная причина, по которой ваш componentDidMount() не работает, заключается в том, что экран B может быть модальным.

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

Решение

Вы должны изменить состояние компонента, который должен воспроизводиться.Лучшее решение, которое я также использую, - это библиотека управления состоянием, такая как Redux .Поэтому, когда вы удаляете элемент с экрана B, просто обновите хранилище редуксов соответствующим образом.Поэтому каждый компонент, использующий этот редуктор, будет перерисовываться, и вы также можете сохранить один удар на свой сервер.