React Native OpenTok OTSubscriber全屏时画面放大无法1:1适配

问题核心原因 #

opentok-react-native@0.20.3版本在iOS端默认视频渲染模式为拉伸填充，直接给组件设置100%宽高时，若组件容器比例和推流端输出的视频分辨率比例不匹配，就会出现画面异常放大、变形的问题。修改resolution参数仅能调整订阅流的最高分辨率，无法控制渲染缩放逻辑，因此无法解决该问题。

具体修复步骤 #

• 配置正确的视频缩放模式：在subscriberProperties中添加videoScaleMode参数，根据需求选择对应值：
  • OTVideoScaleModeFill：等比缩放视频填满整个容器，比例不匹配时裁切超出部分，画面无拉伸变形，适合无黑边全屏场景
  • OTVideoScaleModeFit：等比缩放完整显示全部视频画面，比例不匹配时预留黑边，画面无裁切无变形
  • 不要使用默认的拉伸模式，避免画面变形放大
• 规避RN端样式计算bug：不要直接给OTSubscriber硬编码设备宽高值，外层嵌套一个占满目标显示区域的View容器，让OTSubscriber宽高设为100%继承父容器尺寸，解决旧版本RN上组件尺寸计算错误的问题
• 可选严格1:1适配：如果需要完全无裁切、无黑边、无缩放的1:1显示效果，可以在subscriberEventHandlers的videoDimensionsChanged回调中拿到推流的实际宽高，动态调整外层容器的宽高比和流比例完全一致即可。

修改后示例代码 #

// 订阅属性配置
const subscriberProperties = {
  // 保留原有其他配置
  videoScaleMode: 'OTVideoScaleModeFill', // 核心缩放配置
  fitToView: true, // iOS端视图层级兼容配置
};

// 页面渲染
<View style={{flex: 1, backgroundColor: '#000'}}>
  <OTSession
    apiKey={this.state.apiKey}
    sessionId={this.state.sessionId}
    token={this.state.token}
    options={{
      iceConfig: {
        transportPolicy: 'all',
        includeServers: 'all',
        customServers: [],
      },
    }}>
    <OTSubscriber
      properties={subscriberProperties}
      style={{width: '100%', height: '100%'}}
      eventHandlers={subscriberEventHandlers}
    />
  </OTSession>
</View>

注意：外层View用flex:1即可自动占满整个页面剩余空间，不需要手动引入Dimensions计算deviceWidth、deviceHeight，还能自动适配刘海屏、安全区的尺寸变化。

内容的提问来源于stack exchange，提问作者Taha Ateş