Expo Video 全屏播放时 Android 自动旋转适配指南-js教程-PHP中文网

Expo Video 全屏播放时 Android 自动旋转适配指南

本文详解如何在 Expo 应用中实现 Android 端 Video 组件全屏时自动旋转（如 iOS 默认行为），同时保持应用主界面锁定竖屏，通过 expo-screen-orientation 动态控制方向锁，兼容 Expo SDK 49+。

本文详解如何在 expo 应用中实现 android 端 video 组件全屏时自动旋转（如 ios 默认行为），同时保持应用主界面锁定竖屏，通过 `expo-screen-orientation` 动态控制方向锁，兼容 expo sdk 49+。

在 Expo 开发中，

✅ 正确解决方案：按全屏状态精准控制方向锁

首先安装必要依赖（确保使用 Expo SDK 48+）：

Android开发教程与笔记pdf版

Android文件存取与数据库编程知识，文件操作主要是读文件、写文件、读取静态文件等，同时还介绍了创建添加文件内容并保存，打开文件并显示内容；数据库编程方面主要介绍了SQLite数据库的使用、包括创建、删除、打开数据库、非查询SQL操作指令、查询SQL指令-游标Cursors等知识。

下载

npx expo install expo-screen-orientation
# 或
npm install expo-screen-orientation

然后在 Video 组件中监听全屏状态变更，并调用 ScreenOrientation API：

import React, { useRef } from 'react';
import { View } from 'react-native';
import { Video } from 'expo-av';
import * as ScreenOrientation from 'expo-screen-orientation';

export function VideoPlayer({ videoURL }) {
  const videoRef = useRef(null);

  const onFullscreenUpdate = async ({ fullscreenUpdate }) => {
    // 注意：fullscreenUpdate 值含义（Expo AV v13+）
    // 0: FULLSCREEN_UPDATE_PLAYER_DID_PRESENT → 进入全屏
    // 1: FULLSCREEN_UPDATE_PLAYER_WILL_PRESENT → 即将进入（可选处理）
    // 2: FULLSCREEN_UPDATE_PLAYER_DID_DISMISS → 退出全屏
    // 3: FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS → 即将退出

    if (Platform.OS === 'android') {
      try {
        switch (fullscreenUpdate) {
          case 0: // 进入全屏 → 解锁方向，允许自由旋转
            await ScreenOrientation.unlockAsync();
            break;
          case 2: // 退出全屏 → 锁定回竖屏（与 app.json 一致）
            await ScreenOrientation.lockAsync(
              ScreenOrientation.OrientationLock.PORTRAIT
            );
            break;
        }
      } catch (error) {
        console.warn('Screen orientation change failed:', error);
      }
    }
  };

  return (
    <view style="{{" flex:><video ref="{videoRef}" source="{{" uri: videourl style="{{" width: aspectratio: alignself: borderradius: backgroundcolor: usenativecontrols resizemode="contain" hidecontrolstimeoutmillis="{5000}" onfullscreenupdate="{onFullscreenUpdate}"></video></view>
  );
}

⚠️ 注意事项与最佳实践

app.json 保持锁定竖屏：无需修改 orientation 字段，推荐维持 "orientation": "portrait"，确保非视频页行为一致。
仅 Android 需动态控制：iOS 原生已支持全屏自动旋转，添加条件判断 Platform.OS === 'android' 可避免冗余调用。
错误处理不可省略：lockAsync/unlockAsync 可能因权限或系统限制失败，务必包裹 try/catch。
SDK 版本兼容性：上述 fullscreenUpdate 数值基于 expo-av@13+；若使用旧版，请确认枚举值（如 Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT 已废弃，直接使用数字常量更稳定）。

权限声明（Android）：确保 android/app/src/main/AndroidManifest.xml 中包含：

<activity android:name=".MainActivity" android:configchanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize|uiMode" android:exported="true" android:screenorientation="portrait">
/></activity>