如何为Expo AV原生控件的关闭(X)按钮绑定返回导航事件

你当前的问题是：使用Expo Video组件的原生全屏控件时，点击(X)关闭按钮仅退出全屏，但停留在视频播放页面，无法自动返回来源页面。你尝试的onClose事件无效，因为Expo Video的onClose并不对应原生全屏控件的关闭操作，需要改用onFullscreenUpdate监听全屏状态变化来实现需求。

具体解决方案 #

• 移除无效的onClose事件，新增onFullscreenUpdate事件监听全屏状态变更
• 检测到全屏状态从全屏切换为非全屏时，调用navigation.goBack()返回来源页面
• 保留原有屏幕旋转逻辑，确保页面切换时自动重置旋转状态

修改后的完整代码 #

import { useEffect, useRef } from 'react';
import { Video } from 'expo-av';
import { ScreenOrientation } from 'expo-screen-orientation';

export default function VideoPlayerScreen({ navigation, route }) {
  const videoRef = useRef(null);
  const { videodata } = route.params;

  useEffect(() => {
    const focusSubscription = navigation.addListener("focus", () => {
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT);
    });

    const blurSubscription = navigation.addListener("blur", () => {
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
    });

    // 清理导航订阅，避免内存泄漏
    return () => {
      focusSubscription();
      blurSubscription();
    };
  }, [navigation]);

  const handleFullscreenUpdate = ({ fullscreenUpdate }) => {
    // FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS对应点击原生关闭按钮触发的退出全屏操作
    if (fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS) {
      navigation.goBack();
    }
  };

  return (
    <Video
      ref={videoRef}
      source={{ uri: `https://judopedia.wiki/assets/videos/${videodata.url}` }}
      resizeMode="contain"
      shouldPlay
      isLooping
      style={{ flex: 1 }}
      useNativeControls
      onLoad={() => {
        videoRef?.current?.presentFullscreenPlayer();
      }}
      onFullscreenUpdate={handleFullscreenUpdate}
    />
  );
}

关键说明 #

• Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS是Expo Video内置常量，专门对应原生全屏播放器即将关闭的状态，也就是点击(X)按钮时触发的状态
• 调用navigation.goBack()后，页面会自动触发blur事件，执行屏幕旋转重置逻辑，无需额外编写代码

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