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

问题现象

在使用React Native Video组件时，开发者发现虽然设置了onEnd回调函数用于视频播放结束后自动导航到下一个页面，但实际运行时回调函数被触发了，页面导航却没有执行。

问题代码示例

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

问题根源

经过排查，发现问题出在fullscreen属性上。当Video组件设置为全屏模式时，系统会接管视频播放器的控制权，这可能导致某些回调函数的执行上下文发生变化，进而影响了导航功能的正常执行。

解决方案

1. 移除fullscreen属性：最简单的解决方案是移除fullscreen属性，让视频在应用内正常播放而非全屏模式。

2. 使用替代方案：如果确实需要全屏播放功能，可以考虑以下替代方案：

   • 使用onFullscreenPlayerWillDismiss事件监听全屏关闭时机
   • 在全屏关闭后再执行导航操作
   • 使用自定义的全屏实现而非系统原生全屏

3. 延迟导航：在全屏模式下，可以给导航操作添加适当延迟：

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

最佳实践建议

1. 避免在全屏模式下执行关键操作：全屏模式下系统可能限制某些API的调用

2. 添加错误处理：在导航操作周围添加try-catch块，捕获可能的异常

3. 测试不同场景：特别测试从全屏返回时的应用状态

4. 考虑用户交互：自动导航可能影响用户体验，建议添加明确的用户操作确认

技术原理分析

在iOS和Android平台上，视频全屏播放会触发系统级的播放器界面，此时应用的JavaScript执行环境可能处于受限状态。当视频播放结束时，系统播放器会优先处理自己的生命周期事件，可能导致应用层回调的执行被延迟或中断。

总结

React Native Video组件在全屏模式下可能存在回调函数执行受限的情况。开发者在使用时需要注意全屏模式对应用逻辑的影响，特别是涉及页面导航等关键操作时。通过调整实现方式或使用替代方案，可以确保视频播放和导航功能的正常协作。