如何在react-native-webview中嵌入SoundCloud widget并正常调用其API

方案1的问题更容易解决，方案2的底层逻辑不符合SoundCloud Widget API的设计规范，后续维护成本极高，不建议采用。

方案1修复方法 #

iframe内部元素不缩放的本质原因是静态HTML缺少移动端视口适配配置，未正确声明移动设备渲染规则，导致iframe内部页面按桌面端默认视口宽度渲染，出现元素尺寸异常。

修改后的静态HTML代码如下：

<html>
  <head>
    <!-- 新增移动端视口配置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://w.soundcloud.com/player/api.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      #sound-cloud-iframe {
        border: none;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <iframe
      id="sound-cloud-iframe"
      src="${finalUri}"
    >
    </iframe>
    <script>
      // 原有API调用逻辑可以直接保留在此处
      const widget = SC.Widget('sound-cloud-iframe');
      widget.bind(SC.Widget.Events.READY, () => {
        widget.getDuration(duration => {
          // 处理时长逻辑
        });
      });
    </script>
  </body>
</html>

补充说明 #

• 如果WebView容器是固定比例，可以直接和SoundCloud Widget的官方推荐尺寸对齐：非可视化播放器高度设为166px，可视化播放器按16:9比例设置宽高即可，不需要额外做元素缩放。
• 该修改完全保留原有的API调用逻辑，不需要调整已编写的SC.Widget相关方法调用、事件监听代码，兼容性和后续稳定性都有保障。

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