React Navigation Page не отключается

Question

Это мой AppNavigator.js:

const unChosenDeviceAppStack = createStackNavigator({
  DevicesList: {
      screen: DevicesList,
     },
},
);

const chosenDeviceAppStack = createStackNavigator({
  HomeScreenPage: {
   screen: HomeScreen,
  },
);

, и существует файл Loading, который решает, какую страницу следует перемещать при запуске (рассмотрим переход на HomescreenPage).

Каждое устройство в DeviceLists имеет уникальный HomeScreenPage

Проблема:

приложение переходит на HomescreenPage при запуске, затем я перехожу к спискам устройств и снова явыберите устройство там, и оно снова перейдет к HomescreenPage.Дело в том, что HomescreenPage не был размонтирован !!!он отображает ту же страницу, что и при запуске.

Я ожидал, когда я перейду с HomescreenPage на DeviceLists (который находится в другом stack), первая страница отключается, но этого не происходит!

Может кто-нибудь сказать мне, что именно происходит?и как размонтировать эту страницу и полностью отрендерить ее при повторном переходе на эту страницу.

Answer 1

В отличие от классического жизненного цикла реагирований для компонентов, реагирует на навигацию с реагирует на родную работает по-другому.При переходе от экрана A к экрану B экран A не отключается.Вы можете получить полное объяснение здесь: https://reactnavigation.org/docs/en/navigation-lifecycle.html

Как решить эту проблему?

Вы можете просто прослушать didFocus / willFocus события на определенном экране и вызватькакие-то изменения состояния (которые заставят ваш экран перерисовываться).

// add listener here
componentDidMount () {
  this.focusListener = this.props.navigation.addListener('didFocus', () => {
    // do some magic here and change state
  }
}

// don't forget to remove the listener
componentWillUnmount () {
  this.focusListener.remove() 
}