react-native-youtube同屏多YouTube视频仅显示最后一个的解决方法

碰到多实例只渲染最后一个视频的问题，是react-native-youtube的常见已知坑，用下面几个方法就能实现同屏多视频列表的展示：

1. 修复React组件复用导致的属性覆盖问题 #

当前代码中所有YouTube组件的结构完全一致，没有设置唯一的React key，组件更新时会直接复用同一个实例，原生层绑定的videoId会被最后一个传入的值覆盖，直接出现所有位置都显示最后一个视频的效果。

• 给每个YouTube组件绑定和对应videoId强关联的唯一key值，强制React在组件渲染时创建独立的实例，不会发生跨实例的属性覆盖。
• 组件修改示例：

<View style={styles.paragraph}>
  <Text style={styles.ContentTxt}>1. Цап та баран</Text>
  <View>
    <YouTube 
      key={`yt-7Qrj0ZUDDeI`}
      videoId="7Qrj0ZUDDeI" 
      apiKey="#" 
      style={styles.YouTubePageContainerWrapper} 
    />
  </View>
</View>

其余三个视频组件，同样绑定对应videoId的唯一key即可。

2. 解决原生层播放器的单例复用冲突 #

react-native-youtube底层依赖的安卓原生YouTube Player组件，在早期版本中使用了全局单例的实现逻辑，同一时间挂载多个实例时，原生层会复用同一个PlayerView渲染内容，这是导致多实例渲染异常的核心原因。

• 将react-native-youtube升级到v2.4.0及以上的稳定版本，新版本已经修复了原生层单例复用的问题，支持多实例独立渲染。
• 给所有YouTube组件统一关闭自动播放配置，设置play={false}、controls={1}，避免多个播放器同时初始化时抢占原生渲染资源。
• 校验样式定义的一致性：当前代码中第一个视频的样式引用为styles.YouTubePageContainerWrapper，后续三个视频的样式引用为styles.YouTubeContainerWrapper，要确保这些样式都给容器设置固定的宽高值，不要依赖自适应高度计算，避免多个原生播放器视图重叠显示在同一位置。

3. 长列表场景的性能适配 #

如果后续要展示更多视频条目，一次性挂载多个原生播放器会大幅推高页面内存占用，甚至触发应用闪退，可以配合视口懒加载逻辑优化：

• 监听ScrollView的滚动位置，判断每个视频块是否进入可视区域。
• 视口外的位置只展示带视频封面的静态占位图，只有进入可视区域的块才渲染真实的YouTube组件，既避免多实例同时挂载的冲突，也能降低页面的内存消耗。

注意：不要一次性在页面中同时挂载4个以上的原生YouTube播放器实例，哪怕修复了组件复用问题，过多的原生WebView实例也容易引发iOS/安卓端的内存溢出问题。

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