在 react-native-webview 中嵌入 SoundCloud 小部件的最佳方法是什么？答案

【问题标题】：What is the best way to embed a SoundCloud widget in react-native-webview?在 react-native-webview 中嵌入 SoundCloud 小部件的最佳方法是什么？
【发布时间】：2022-01-02 18:52:56
【问题描述】：

基本上正如标题所暗示的那样。我的应用程序中有一个 react-native-webview 组件，我希望它通过 SoundCloud widget 显示一个 SoundCloud 播放器。我还想使用小部件 API 公开的可用方法（例如 getDuration），向事件添加侦听器等。我尝试了 2 种方法来实现这一点，但每种方法都以我没有的不同问题结束能够解决。

选项 1：

我传递给WebView 的source 属性是一个静态HTML 字符串：

<html>
        <head>
          <script src="https://w.soundcloud.com/player/api.js"></script>
        </head>
        <body>
          <iframe
            id="sound-cloud-iframe"
            src="${finalUri}"
          >
          </iframe>
        </body>
      </html>

这适用于 API 和所有内容，但我似乎无法让它在屏幕上看起来不错。它看起来像这样：

红色边框标记WebView 组件。我希望视频占据整个空间，我可以将iframe 的width 和height 属性设置为100%。问题是，当我这样做时，iframe 内的元素会保持其大小（例如，曲目/艺术家名称、底部的进度条等）。看这里：

如果我能以某种方式使其全部按相同的比例缩放，那就太棒了。注入单独缩放每个元素的 JS 脚本似乎是一个糟糕的解决方案。

选项 2：

我传递给WebView 的source 属性是一个SoundCloud 链接，例如：

source={{uri: https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F94546771&show_artwork=true}}

这让视频播放器看起来恰到好处：

但是，它不允许我使用 SoundCloud 公开的 API。原因是，正如他们的 API 参考中所提到的，我需要将一些 iframe 元素传递给 SC.Widget 以便能够使用我需要的所有方法和侦听器。这里没有iframe！在WebView 中呈现的 HTML 内容实际上是在iframe 中呈现的确切内部文档，如果我使用我放入选项 1 中的静态 HTML。如果我能让 API 以某种方式工作，那将太棒了。

所以，基本上，我想知道哪个选项提供了更容易解决的问题，如果它们完全可以解决的话。任何帮助将不胜感激。

【问题讨论】：

标签： react-native iframe soundcloud react-native-webview

【解决方案1】：

已解决，使用了这个静态 HTML：

<html>
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <script src="https://w.soundcloud.com/player/api.js"></script>
        </head>
        <body>
          <iframe
            id="sound-cloud-iframe"
            src="${finalUri}"
            scrolling="no"
            style="width: 100%; height: 100%;"
          >
          </iframe>
        </body>
      </html>

meta 标签是成功的关键 (https://www.w3schools.com/css/css_rwd_viewport.asp)

【讨论】：