React Native调用Swift自定义AVPlayer模块报错：Cannot read property 'renderVideo' of null

1. 原生模块名称不匹配 #

你的Swift代码存在名称冲突：

• 类的@objc标注为@objc(AudioVideoPlayer)，但moduleName()返回的是"VideoPlayerBridge"——React Native会以moduleName()的返回值作为模块注册名，而非类名。
• JS代码中尝试获取NativeModules.AudioVideoPlayer，但实际注册的模块名是VideoPlayerBridge，直接导致AudioVideoPlayer为null。

解决方法：统一模块名称，二选一即可：

• 修改Swift的moduleName()返回值：

static func moduleName() -> String! {
  return "AudioVideoPlayer"
}

• 或修改JS导入代码：

import { NativeModules } from 'react-native';
const { VideoPlayerBridge } = NativeModules;

2. 方法名称不匹配 #

Swift中定义的方法是renderVideoFromUrl:，但JS里调用的是renderVideo()，名称完全不对应——即便模块加载成功，也会出现方法找不到的问题。

解决方法：统一方法名称，二选一即可：

• 修改Swift方法名与JS调用对应：

@objc(renderVideo:)
public func renderVideo(_ urlString: String) -> String {
  // 你的视频播放逻辑
}

• 或修改JS调用代码：

// 注意模块名要和注册名一致
VideoPlayerBridge.renderVideoFromUrl(videoURL);

3. 原生模块注册完整性检查 #

确保Swift模块被正确注册到React Native：

• 确认项目存在Bridging-Header.h文件，且已导入React Native头文件：

#import <React/RCTBridgeModule.h>

• 确保Swift类继承NSObject（你的代码已满足），且模块注册逻辑符合React Native要求。
• 清理项目缓存：执行pod install（iOS端），重启Metro服务，重新编译项目，避免缓存导致模块未加载。

4. 额外优化建议 #

你的Swift方法返回String，但AVPlayerViewController播放视频是异步操作，返回字符串无实际意义，建议改为通过回调通知JS播放状态：

@objc(renderVideo:withCompletionHandler:)
public func renderVideo(_ urlString: String, withCompletionHandler completion: @escaping (String?, Error?) -> Void) {
  guard let url = URL(string: urlString) else {
    completion(nil, NSError(domain: "VideoPlayer", code: -1, userInfo: [NSLocalizedDescriptionKey: "无效URL"]))
    return
  }
  let player = AVPlayer(url: url)
  let playerVC = AVPlayerViewController()
  playerVC.player = player
  
  if let rootVC = UIApplication.shared.keyWindow?.rootViewController {
    rootVC.present(playerVC, animated: true) {
      player.play()
      completion("视频开始播放", nil)
    }
  } else {
    completion(nil, NSError(domain: "VideoPlayer", code: -2, userInfo: [NSLocalizedDescriptionKey: "未找到根视图控制器"]))
  }
}

对应JS调用：

AudioVideoPlayer.renderVideo(videoURL, (message, error) => {
  if (error) {
    console.error("播放视频出错:", error);
  } else {
    console.log(message);
  }
});

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