React Native Video组件中onEnd回调与全屏模式的导航冲突解析

问题现象

在使用React Native Video组件时，开发者遇到一个典型问题：当视频播放结束时，虽然触发了onEnd回调函数，但预期的页面导航却没有执行。具体表现为在Android 14设备上，设置了fullscreen属性的视频播放完毕后，导航逻辑失效。

问题定位

通过分析问题代码，发现开发者使用了如下配置：

<Video
  source={url}
  onEnd={() => navigateToNextScreen()}
  style={{flex: 1}}
  fullscreen
  resizeMode="stretch"
  shutterColor={Colors.white}
/>

关键点在于fullscreen属性的使用。当视频处于全屏模式时，系统会接管部分控制权，这可能导致React Native的导航系统无法正常工作。

技术原理

全屏视频播放涉及以下技术层面：

1. 原生层控制：全屏模式下，视频播放器会切换到系统原生全屏控制器
2. 上下文隔离：全屏状态创建了一个新的视图层级，可能中断React Native的JS执行环境
3. 事件冒泡阻断：系统全屏控制器可能会拦截或阻断部分事件的传递

解决方案

方案一：禁用全屏模式

最简单的解决方案是移除fullscreen属性，让视频在应用内播放：

<Video
  source={url}
  onEnd={navigateToNextScreen}
  style={{flex: 1}}
  resizeMode="stretch"
/>

方案二：延迟导航执行

如果必须使用全屏模式，可以尝试延迟导航操作：

onEnd={() => setTimeout(navigateToNextScreen, 100)}

方案三：监听全屏状态变化

更完善的方案是监听全屏状态变化：

const [isFullscreen, setIsFullscreen] = useState(false);

const handleEnd = () => {
  if (!isFullscreen) {
    navigateToNextScreen();
  }
};

<Video
  onFullscreenPlayerWillPresent={() => setIsFullscreen(true)}
  onFullscreenPlayerWillDismiss={() => setIsFullscreen(false)}
  onEnd={handleEnd}
  // 其他属性...
/>

最佳实践建议

1. 谨慎使用全屏模式：评估是否真正需要全屏播放功能
2. 添加错误边界：在导航逻辑周围添加try-catch块
3. 测试多平台：特别是在Android和iOS上的表现可能不同
4. 考虑用户体验：全屏退出时的过渡动画是否会影响导航流畅性

总结

React Native Video组件的全屏模式与导航系统的交互存在一些微妙之处。理解原生组件与JavaScript环境之间的边界是解决这类问题的关键。通过合理设计事件处理逻辑和状态管理，可以确保视频播放结束后的导航行为符合预期。

对于需要复杂视频交互的应用，建议深入阅读React Native Video的文档，特别是关于全屏生命周期事件的部分，以构建更健壮的视频播放体验。