В принятом в настоящее время ответе предлагается решение с реактивной навигацией, а не с реактивной навигацией (RNN), поэтому я дам свои два цента.
Как указывает Стивен Лю в своем ответе, RNN предоставляет методы жизненного цикла экрана, которые срабатывают, когда компонент появляется (componentDidAppear) и исчезает (componentDidDisappear).
Ответ Стивена работает для компонента класса, однако в эпоху хуков я предпочитаю функциональные компоненты. Итак, вот как использовать методы жизненного цикла экрана RNN в функциональном компоненте:
import React, { useEffect } from 'react'
import { Navigation } from 'react-native-navigation'
const MyComponent = ({ componentId }) => {
useEffect(() => {
const navListener = Navigation.events().bindComponent(this, componentId)
// remove the listener during cleanup
return () => {
navListener.remove()
}
}, [componentId])
this.componentDidAppear = () => {
// do stuff when component appears
}
this. componentDidDisappear = () => {
// do stuff when component disappears
}
}
Важно: MyComponent требуется componentId опора, которая вводится автоматически, если это зарегистрированный экран RNN или модальный (Navigation.registerComponent). Вы также можете вручную передать его от компонента экрана дочернему элементу, где он вам нужен.
???????????? Бонус: useComponentDidAppear крючок ????????????
Я довольно часто использую компонент RNN componentDidAppear в своем проекте, поэтому я сделал специальный перехватчик, чтобы очень легко повторно использовать его во всех моих функциональных компонентах:
export const useComponentDidAppear = (componentId, callback) => {
useEffect(() => {
const navListener = Navigation.events().bindComponent(this, componentId)
return () => {
navListener.remove()
}
}, [componentId])
this.componentDidAppear = () => {
callback()
}
}
// then use it like this
const SomeScreen = ({ componentId }) => {
useComponentDidAppear(componentId, () => {
// do stuff when the component appears!
})
}
18.11.2019
