React Native Video 项目中外部字幕标题显示为空的解决方案

问题背景

在 React Native Video 项目的 Android 平台实现中，开发者发现当使用外部字幕文件时，即使明确提供了标题字符串，字幕轨道的标题(title)属性仍然会被设置为 null。这个问题影响了开发者对字幕轨道的识别和管理，特别是在多语言字幕场景下。

技术分析

该问题的根源在于 React Native Video 的 Android 原生代码实现中，对于字幕轨道标题的处理存在不一致性。具体表现为：

1. 在创建字幕源时，标题被设置为 ExoPlayer 的 label 属性
2. 但在将 ExoPlayer 轨道信息转换为通用轨道信息时，却尝试从 id 属性读取标题

这种不一致导致了即使正确设置了字幕标题，在 JavaScript 层也无法正确获取到该信息。

解决方案

通过修改 ReactExoplayerView.java 文件中的 exoplayerTrackToGenericTrack 方法，将标题的获取来源从 format.id 改为 format.label，即可解决此问题。这一修改符合 ExoPlayer 的实际实现，因为字幕标题确实是被存储在 label 属性中。

修改后的关键代码如下：

private Track exoplayerTrackToGenericTrack(Format format, int trackIndex, TrackSelection selection, TrackGroup group) {
    Track track = new Track();
    track.setIndex(trackIndex);
    if (format.sampleMimeType != null) track.setMimeType(format.sampleMimeType);
    if (format.language != null) track.setLanguage(format.language);
    if (format.label != null) track.setTitle(format.label); // 修改此行
    track.setSelected(isTrackSelected(selection, group, 0));
    return track;
}

版本更新

该修复已被包含在 React Native Video 的 6.0.0-rc.0 版本中。开发者可以通过升级到此版本或更高版本来解决外部字幕标题显示为空的问题。

技术建议

对于需要在当前版本中临时解决此问题的开发者，可以考虑以下方案：

1. 手动修改 node_modules 中的相关文件（不推荐用于生产环境）
2. 使用 patch-package 等工具持久化修改
3. 在 JavaScript 层面对字幕轨道信息进行后处理，补充缺失的标题信息

总结

React Native Video 项目中的这个 Bug 展示了跨平台视频播放组件开发中常见的属性映射问题。通过深入分析原生层实现细节，开发者可以更好地理解底层机制，并在遇到类似问题时快速定位解决方案。对于视频播放功能的关键组件，保持对官方更新的关注并及时升级是避免此类问题的最佳实践。