可见性监听
如何监听页面显示或隐藏
使用 useVisibleEffect
import React, { useCallback } from 'react'
import { useVisibleEffect } from 'hybrid-navigation'
useVisibleEffect(
useCallback(() => {
Alert.alert('Lifecycle Alert!', 'componentDidAppear.')
return () => Alert.alert('Lifecycle Alert!', 'componentDidDisappear.')
}, []),
)
如果需要获取页面可见状态,使用 useVisible
或者 useVisibility
。
import React, { useEffect } from 'react'
import { useVisible } from 'hybrid-navigation'
const MyComponent = () => {
const visible = useVisible()
useEffect(() => {
if (!visible) {
return
}
console.info('页面可见')
return () => {
console.info('页面不可见')
}
}, [visible])
return <View />
}
类组件
本项目中的例子几乎都是用函数组件示例的,因为这是趋势,历史的车轮滚滚向前,该忘掉的就忘掉,该丢弃的就丢弃。
有时由于历史遗留问题,不得不使用类组件,此时如何监听页面可见性呢?
自定义一个 HOC
export interface Lifecycle {
componentDidAppear: () => void
componentDidDisappear: () => void
}
export function withLifecycle(ClassComponent: React.ComponentClass<any>) {
const FC = (props: any) => {
const ref = useRef<React.Component & Lifecycle>(null)
useVisibleEffect(
useCallback(() => {
if (ref.current?.componentDidAppear) {
ref.current.componentDidAppear()
}
const current = ref.current
return () => {
if (current?.componentDidDisappear) {
current.componentDidDisappear()
}
}
}, []),
)
return <ClassComponent ref={ref} {...props} />
}
FC.navigationItem = (ClassComponent as any).navigationItem
const name = ClassComponent.displayName || ClassComponent.name
FC.displayName = `withLifecycle(${name})`
return FC
}
在类组件中添加 componentDidAppear
和 componentDidDisappear
两个实例方法,使用 withLifecycle
包裹类组件并导出,如下所示
class MyClassComponent extends React.Component<InjectedProps> implements Lifecycle {
static navigationItem: NavigationItem = {
titleItem: {
title: '我的类组件',
},
}
componentDidAppear() {
console.info('MyClassComponent#componentDidAppear')
}
componentDidDisappear() {
console.info('MyClassComponent#componentDidDisAppear')
}
}
export default withLifecycle(MyClassComponent)