React Native Video组件全屏模式下导航失效问题解析

问题现象

在使用React Native Video组件时，开发者遇到了一个典型的功能异常：当视频播放结束后，虽然触发了onEnd回调函数，但预期的页面导航操作却没有执行。具体表现为在视频组件中设置了onEnd={() => navigateToNextScreen()}的回调，控制台日志显示回调确实被调用，但界面没有任何跳转反应。

问题定位

经过深入排查，发现问题根源在于Video组件的fullscreen属性。当该属性被启用时，视频会进入全屏播放模式，而这种模式会干扰React Navigation的正常导航操作。这是因为：

1. 全屏模式下，视频组件会接管整个屏幕的渲染控制
2. 系统级的全屏实现可能会创建一个新的视图层级
3. 导航操作需要依赖的上下文在全屏模式下可能变得不可访问

解决方案

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

方案一：禁用全屏属性

最简单的解决方案是移除fullscreen属性，让视频在当前视图层级中播放：

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

方案二：使用全屏状态监听

如果需要保留全屏功能，可以通过监听全屏状态变化来实现可靠导航：

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

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

return (
  <Video
    source={url}
    onEnd={handleVideoEnd}
    onFullscreenPlayerWillDismiss={() => setIsFullscreen(false)}
    onFullscreenPlayerDidPresent={() => setIsFullscreen(true)}
    fullscreen
    style={{flex: 1}}
    resizeMode="stretch"
  />
);

方案三：延迟导航操作

在全屏关闭后再执行导航操作：

const handleVideoEnd = () => {
  if (Platform.OS === 'ios') {
    // iOS需要特殊处理
    setTimeout(() => {
      navigateToNextScreen();
    }, 500);
  } else {
    navigateToNextScreen();
  }
};

最佳实践建议

1. 谨慎使用全屏模式：全屏模式会改变应用的视图层级结构，可能影响其他功能的正常运行

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

3. 平台差异处理：iOS和Android在全屏实现上有所不同，需要分别测试

4. 状态管理：使用状态管理工具确保应用状态在全屏切换时保持一致

5. 用户反馈：在全屏切换时提供加载指示器，改善用户体验

总结

React Native Video组件的全屏模式虽然提供了更好的观看体验，但也带来了导航功能失效的问题。通过理解全屏模式的实现机制，开发者可以选择合适的解决方案来平衡功能需求和用户体验。建议在实现类似功能时，充分测试各平台的表现，并考虑添加适当的用户反馈机制。