如何解决react-native-video控制栏溢出视频遮挡下方文字的问题

问题根因 #

react-native-video 自带的原生控制栏默认是悬浮渲染层级，不受 Video 组件设定的固定宽高约束，配合 resizeMode='contain' 时，若视频实际比例和你设置的 457:264 比例不匹配，会在视频上下生成黑边，控制栏极易超出 Video 组件边界，遮挡下方页面元素。

修复代码 #

// 外层加容器限制边界
<View style={{width: 457, height: 264, overflow: 'hidden'}}>
  <Video
    resizeMode='contain'
    source={fishVideo}
    // 宽高改为占满父容器
    style={{width: '100%', height: '100%'}}
    controls={true}
    // 新增控制栏样式约束，强制固定在视频内部底部
    controlStyle={{
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      height: 40,
      backgroundColor: 'rgba(0,0,0,0.5)'
    }}
    ref={ref => {
      this.player = ref;
    }}
  />
</View>

备选适配方案 #

如果你的 react-native-video 版本较低不支持 controlStyle 属性，可选择以下方案：

• 适当调高 Video 组件的固定高度，预留控制栏的占位空间（通常增加20-40px即可，比如原高度264调整为300）
• 关闭原生控制栏（controls={false}），自行实现自定义控制栏，完全自主控制布局位置

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