基于react-native-video实现非模态窗口视频全屏的简便方案有哪些？

实现方案 #

方案一：直接使用封装库（改动最小）

可以直接使用基于react-native-video封装的自定义控制器库，自带完整的倍速调节、进度条、全屏切换能力，全屏逻辑默认采用样式层级覆盖+屏幕旋转实现，不需要额外编写模态窗口相关代码，你现有的业务逻辑基本可以直接复用。

方案二：现有代码基础上轻量改造

如果不想更换现有基础依赖，仅需引入react-native-orientation-locker库处理屏幕方向控制，搭配动态样式即可实现无模态全屏，具体操作步骤如下：

1. 新增全屏状态变量

const [isFullScreen, setIsFullScreen] = useState(false);

2. 新增全屏切换逻辑

import Orientation from 'react-native-orientation-locker';

const toggleFullScreen = () => {
  if (isFullScreen) {
    // 切回竖屏
    Orientation.lockToPortrait();
  } else {
    // 切为横屏
    Orientation.lockToLandscape();
  }
  setIsFullScreen(!isFullScreen);
};

3. 给外层容器绑定动态样式，你原有倍速、进度条相关逻辑完全不需要修改

// 外层容器样式绑定
<View style={isFullScreen ? styles.fullScreenWrap : styles.normalWrap}>
  {/* 你原有Video和控制组件代码 */}
  {/* 新增全屏切换按钮 */}
  <TouchableOpacity onPress={toggleFullScreen}>
    {/* 引入全屏/退出全屏图标即可 */}
  </TouchableOpacity>
</View>

// 补充样式
const styles = StyleSheet.create({
  normalWrap: {
    // 保留你原来的容器样式
  },
  fullScreenWrap: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: '#000',
    zIndex: 999,
  }
})

全屏状态下容器会直接覆盖整个屏幕层级，不需要模态窗口即可实现效果，适配两端系统。

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