useEffect是react中的hook

安装：yarn add react

引用：import { useEffect } from "react"

useFocusEffect是@react-navigation/native中的hook

安装：yarn add @react-navigation/native

引用：import { useFocusEffect } from "@react-navigation/native"

区别

useFocusEffect类似于React的useEffect hook，唯一的区别是useFocusEffect只在屏幕当前聚焦时运行

发现

最近在做react-native开发Android app时，有一个页面需要做宽屏展示的效果，首先我想到的是用react中的useEffect来做变换页面时切换宽屏。
用了一下，有bug。当在宽屏页面返回到竖屏页面时，当前的竖屏页面却是宽屏。经查询react native中的useFocusEffect可以实时根据屏幕的变化来执行事件。

1
2
3
4
5
import { useFocusEffect } from "@react-navigation/native
import Orientation from "react-native-orientation-locker"
  useFocusEffect(() => {
    Orientation.lockToLandscapeLeft();    
  })

注释：

Orientation（自己命名）：
安装：yarn add react-native-orientation-locker
react-native-orientation-locker（一个react-native模块）包中的，监听设备方向的变化，获取当前方向，锁定到当前方向。

Orientation.lockToPortrait() // lockToPortrait为竖屏显示
Orientation.lockToLandscapeLeft() // lockToLandscapeLeft为宽屏显示