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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Решение

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

Answer 3

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

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

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

Answer 4

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

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

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