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

Question

基本上如标题所示。我的应用程序中有一个 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 和所有东西，但我似乎无法让它看起来很好 on-screen。它看起来像这样：

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

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

选项 2：

我传递给 WebView 的 source 道具是一个 SoundCloud link，例如：

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！如果我使用选项 1 中的静态 HTML，则在 WebView 内呈现的 HTML 内容实际上是将在 iframe 内呈现的确切内部文档。如果我可以让 API 以某种方式像那样工作，那太棒了。

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

Answer 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)

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

What is the best way to embed a SoundCloud widget in react-native-webview?

react-native

iframe

soundcloud

react-native-webview