React Native Video组件onEnd回调中导航失效问题解析

问题现象

在使用React Native Video组件(版本6.7.0)开发视频播放功能时，开发者遇到了一个典型问题：当视频播放结束时，虽然onEnd回调函数被正确触发，但预期的页面导航操作却没有执行。这个问题在iOS和Android平台(特别是Android 14设备)上都会出现，且在新架构模式下也会发生。

问题排查

根据开发者提供的代码片段，可以看到他们试图在视频播放结束时通过onEnd回调执行导航操作：

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

根本原因

经过深入分析，发现问题出在fullscreen这个属性上。当Video组件启用了全屏模式时，系统会接管视频播放的上下文环境。在这种情况下，任何试图在onEnd回调中执行的导航操作都会被全屏播放器的上下文所拦截，导致导航无法正常完成。

解决方案

针对这个问题，有以下几种可行的解决方案：

1. 移除fullscreen属性：如果应用场景不需要全屏播放，最简单的解决方案就是移除fullscreen属性。

2. 使用setTimeout延迟导航：在全屏模式下，可以给导航操作添加一个小的延迟：

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

3. 监听全屏状态变化：更完善的解决方案是监听全屏状态变化，确保在全屏退出后再执行导航：

   const [isFullscreen, setIsFullscreen] = useState(false);
   
   const handleEnd = () => {
     if (!isFullscreen) {
       navigateToNextScreen();
     }
   };
   
   // 在Video组件中添加
   onFullscreenPlayerWillDismiss={() => setIsFullscreen(false)}
   onFullscreenPlayerDidPresent={() => setIsFullscreen(true)}
   

最佳实践建议

1. 避免在全屏回调中执行复杂操作：全屏模式下系统会接管很多控制权，建议避免在这种上下文中执行UI相关的重大变更。

2. 添加错误边界处理：对于关键导航操作，建议添加try-catch块来捕获可能的异常。

3. 测试不同平台行为：全屏模式在不同平台上的实现可能有差异，务必在目标平台上进行全面测试。

总结

React Native Video组件的全屏模式会创建一个独立的上下文环境，这可能干扰正常的导航流程。开发者在使用onEnd回调执行导航操作时，需要特别注意全屏模式带来的影响。通过理解底层机制并采用适当的解决方案，可以确保视频播放和页面导航都能正常工作。