React Native iOS集成JWPlayer SDK v4切换导航tab时抛出视图控制器异常

该报错源于react-native-jw-media-player@0.2.0-beta.2的iOS原生实现未处理组件卸载时JWPlayerViewController与父控制器的解绑逻辑。react-navigation标签导航切换页面时，未完全销毁的播放器控制器还持有旧父控制器引用，再次进入页面挂载新视图时就会出现父控制器不匹配的异常。

JS侧临时修复方案 #

无需修改原生代码，可先尝试通过React Navigation配置和组件生命周期处理规避问题：

1. 在标签导航的播放器页面配置中开启unmountOnBlur，确保离开页面时组件完全卸载：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

// 导航配置示例
<Tab.Navigator>
  <Tab.Screen
    name="Player"
    component={PlayerScreen}
    options={{
      unmountOnBlur: true,
    }}
  />
  {/* 其他标签页配置 */}
</Tab.Navigator>

2. 在播放器页面的组件生命周期中添加销毁逻辑，页面卸载时主动清理播放器实例：

import { useRef, useEffect } from 'react';
import JWPlayer from 'react-native-jw-media-player';

const PlayerScreen = () => {
  const playerRef = useRef(null);

  useEffect(() => {
    // 页面卸载时的清理逻辑
    return () => {
      playerRef.current?.stop();
      playerRef.current?.destroy();
    };
  }, []);

  return <JWPlayer ref={playerRef} {/* 你的播放器配置 */} />;
};

iOS原生层永久修复方案 #

如果JS侧方案无效，直接修改原生库代码即可彻底解决问题：

1. 打开项目下node_modules/react-native-jw-media-player/ios/RNJWPlayerView.m文件
2. 找到removeFromSuperview方法，替换为以下实现，如果没有该方法直接新增即可：

- (void)removeFromSuperview {
  [super removeFromSuperview];
  if (_playerViewController) {
    [_playerViewController willMoveToParentViewController:nil];
    [_playerViewController.view removeFromSuperview];
    [_playerViewController removeFromParentViewController];
    _playerViewController = nil;
  }
}

3. 进入iOS目录执行pod install后重新运行应用：

cd ios && pod install && cd .. && npx react-native run-ios

如果需要保留修改不被后续重装依赖覆盖，可以使用patch-package工具将改动生成补丁存入项目中。

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