嘿，我来帮你搞定这个视频全屏后导航栏还一直显示的问题！这里有几个实用的方案，你可以根据自己的项目情况来选：

方案一：直接监听视频的全屏状态，动态控制导航栏显示 #

这个方案最直接，因为它和视频的全屏状态直接绑定，精准度最高。

1. 先给Navbar组件加个显示控制的开关 #

修改你的Navbar.js，新增一个isVisible属性，根据这个属性来决定是否渲染导航栏：

import React, { Component } from 'react';
import { Header } from 'react-native-elements'; // 假设你用的是react-native-elements的Header组件
import Colors from './Colors';

export default class Navbar extends Component {
  render() {
    // 如果isVisible为false，直接返回null，不渲染导航栏
    if (!this.props.isVisible) return null;

    return (
      <Header
        style={{ backgroundColor: Colors.navbarBackgroundColor }}
        backgroundColor={Colors.navbarBackgroundColor}
        androidStatusBarColor={Colors.statusBarColor}
        noShadow={true}
      >
        {this.props.left ? this.props.left : null}
        {/* 这里放你原来的其他导航栏内容 */}
      </Header>
    );
  }
}

2. 在视频所在的组件里监听全屏事件 #

假设你用的是react-native-video这类主流视频组件，它会提供onFullscreenChange回调，你可以在这里更新状态，控制Navbar的显示：

import React, { Component } from 'react';
import Video from 'react-native-video';
import Navbar from './Navbar';

export default class VideoScreen extends Component {
  state = {
    isVideoFullscreen: false,
  };

  // 监听视频全屏状态变化
  handleFullscreenChange = (isFullscreen) => {
    this.setState({ isVideoFullscreen: isFullscreen });
  };

  render() {
    return (
      <>
        {/* 视频全屏时，Navbar的isVisible设为false，隐藏导航栏 */}
        <Navbar isVisible={!this.state.isVideoFullscreen} />
        <Video
          source={{ uri: '你的视频地址' }}
          style={{ flex: 1 }}
          fullscreen={true}
          onFullscreenChange={this.handleFullscreenChange}
        />
      </>
    );
  }
}

方案二：监听屏幕方向变化（适合靠横屏实现全屏的场景） #

如果你的视频全屏是通过切换到横屏来实现的，那可以监听屏幕方向，横屏时自动隐藏导航栏：

1. 先安装方向监听依赖 #

npm install react-native-orientation-locker --save
# 或者用yarn：yarn add react-native-orientation-locker

2. 在Navbar组件里监听方向变化 #

修改Navbar.js，加入方向监听逻辑：

import React, { Component } from 'react';
import { Header } from 'react-native-elements';
import Colors from './Colors';
import Orientation from 'react-native-orientation-locker';

export default class Navbar extends Component {
  state = {
    isLandscape: false,
  };

  componentDidMount() {
    // 挂载时添加方向监听
    Orientation.addOrientationListener(this.handleOrientationChange);
    // 获取初始屏幕方向，初始化状态
    const initialOrientation = Orientation.getInitialOrientation();
    this.setState({ isLandscape: initialOrientation.includes('LANDSCAPE') });
  }

  componentWillUnmount() {
    // 卸载时移除监听，避免内存泄漏
    Orientation.removeOrientationListener(this.handleOrientationChange);
  }

  handleOrientationChange = (orientation) => {
    // 判断当前是否为横屏，更新状态
    this.setState({ isLandscape: orientation.includes('LANDSCAPE') });
  };

  render() {
    // 横屏时隐藏导航栏
    if (this.state.isLandscape) return null;

    return (
      <Header
        style={{ backgroundColor: Colors.navbarBackgroundColor }}
        backgroundColor={Colors.navbarBackgroundColor}
        androidStatusBarColor={Colors.statusBarColor}
        noShadow={true}
      >
        {this.props.left ? this.props.left : null}
        {/* 你的其他导航栏内容 */}
      </Header>
    );
  }
}

方案三：如果用了React Navigation，直接控制导航栏显示 #

要是你的项目用的是React Navigation，可以直接通过setOptions来动态隐藏导航栏：

import React, { useEffect, useState } from 'react';
import Video from 'react-native-video';
import { useNavigation } from '@react-navigation/native';

export default function VideoScreen() {
  const navigation = useNavigation();
  const [isFullscreen, setIsFullscreen] = useState(false);

  useEffect(() => {
    // 根据视频全屏状态，设置导航栏是否显示
    navigation.setOptions({
      headerShown: !isFullscreen,
    });
  }, [isFullscreen, navigation]);

  const handleFullscreenChange = (isFull) => {
    setIsFullscreen(isFull);
  };

  return (
    <Video
      source={{ uri: '你的视频地址' }}
      style={{ flex: 1 }}
      fullscreen={true}
      onFullscreenChange={handleFullscreenChange}
    />
  );
}

这几个方案里，方案一最精准，方案二适合依赖横屏的场景，方案三则是React Navigation项目的专属捷径，你挑适合自己的用就行！

内容的提问来源于stack exchange，提问作者Chris Henry