React native中横屏状态隐藏android顶部状态栏和底部导航栏

昨天想在RN应用中编写一个横屏页面，且在该页面隐藏顶部状态栏和底部的操作栏，具体效果如下:

如上我需要实现的功能:

1. 跳转到指定页面横屏展示
2. 隐藏顶部状态栏
3. 隐藏底部操作栏

具体我说的顶部状态栏和底部导航栏就是如下，应该不用解释:

项目使用的是expo创建的，主要依赖是expo提供的，网上找到了隐藏顶部状态栏的方式:

import { StatusBar } from 'expo-status-bar'; <StatusBar hidden={false}/> 该组件由expo-status-bar依赖库提供，它接收一个属性hidden，因为我只需要在部分页面隐藏它，所以将其定义为一个状态监听路由变化， router使用的expo-router，它提供了一个useSegments的hooks返回当前跳转的路由的数组， 比如跳跳转到(tabs)文件夹下的profile页面，得到的结果是一个路径数组: ['(tabs)','profile']

所以监听segments变化，如果匹配到需要隐藏状态栏的页面后修改hidden的值，第二个功能点实现了

但是接下来我找隐藏底部导航栏的方法，有些说修改android文件中的java代码啥的，我也没看明白， expo创建的RN项目也不用手动改那些，所以还是仔细查看了expo的文档，发现expo提供了一个依赖叫做 expo-navigation-bar，它提供了setVisibilityAsync, getVisibilityAsync方法:

import { setVisibilityAsync, getVisibilityAsync } from 'expo-navigation-bar';
import { lockAsync, unlockAsync } from "expo-screen-orientation";
    useEffect(() => {
        lockAsync(5)
        getVisibilityAsync().then(async (res) => {
            if (res === 'visible') {
                await setVisibilityAsync('hidden')
            }
        })
        return () => {
            setVisibilityAsync('visible')
            unlockAsync()
        }
    }, [])

组件初始化时使用getVisibilityAsync获取当前底部导航栏是否可见，并设置隐藏，在卸载时设置可见，注意他们接收的值分别是hidden 和 visible

横屏功能实现:expo提供了expo-screen-orientation，用于锁定当前屏幕是横屏还是竖屏,5是横屏，其实还有很多模式，可以打开依赖文件看一下ts类型 在合适的时机调用lockAsync()和unloakAsync()即可

总给一下：

应用expo-status-bar的Statusbar组件，控制hidden属性 应用expo-navigation-bar依赖库的setVisibilityAsync, getVisibilityAsync方法控制导航栏 应用expo-screen-orientation依赖库的lockAsync, unlockAsync控制横屏竖屏

文笔有限，我也是初次接触RN,当然react之前有基础，练手demo是模仿实现手机上自带的音乐软件UI功能制作， gitee地址 欢迎大佬指导！