react-native style iframe 以适应 webview [英] react-native style iframe to fit webview

问题描述

我正在尝试在 react-native 应用程序中实现各种 embed；

他们有这些结构

推特

<blockquote class=\"twitter-tweet\" data-width=\"500\"><p lang=\"en\" dir=\"ltr\">我记录了我的计算教授整整一个学期，我希望他永远不会看到这个，但是......早安GGGG <a href=\"">pic.twitter.com/lTXGcd1Jf0</a></p>——Edward Chai (@edwardchaii) <a href=\"https://twitter.com/edwardchaii/status/1020733530362425344?ref_src=twsrc%5Etfw\">2018 年 7 月 21 日</a></blockquote>\n异步 src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n

Spotify

<iframe src=\"https://open.spotify.com/embed/track/2dgrYdgguVZKeCsrVb9XEs%3Fsi%3DQ7ihpJ__RCSHIgTzf1_QBA\" width=\"300\" height=\"380\" frameborder=\"0\" allowtransparency=\"true\" allow=\"encrypted-media\"></iframe>

使用 react-native-webview

如您所见，有几个问题:

1. 由于容器 View 必须具有 width 和 height 值，因此它不考虑 embed 大小;有时高有时小有时宽
2. embed 不适合它的容器；我试图把 width: 100% 但即使它适合 width 我仍然有容器 height 固定这留下了很多空白.

我不知道该把手放在哪里，我尝试了很多 hacky 解决方案，但似乎根本不起作用

解决方案

您是否尝试过使用 scalepagetofit 属性?，它应该匹配视图

I'm trying to implement various embed in a react-native application;

They have these structures

Twitter

<blockquote class=\"twitter-tweet\" data-width=\"500\"><p lang=\"en\" dir=\"ltr\">i recorded my calc professor for an entire semester, I hope he never sees this but... GOOOD MORNINGGGG <a href=\"">pic.twitter.com/lTXGcd1Jf0</a></p>— Edward Chai (@edwardchaii) <a href=\"https://twitter.com/edwardchaii/status/1020733530362425344?ref_src=twsrc%5Etfw\">July 21, 2018</a></blockquote>\n<script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n

Spotify

<iframe src=\"https://open.spotify.com/embed/track/2dgrYdgguVZKeCsrVb9XEs%3Fsi%3DQ7ihpJ__RCSHIgTzf1_QBA\" width=\"300\" height=\"380\" frameborder=\"0\" allowtransparency=\"true\" allow=\"encrypted-media\"></iframe>

Using react-native-webview module and this structure in my Component

    <View style={{flex: 1, height: 300, width: 350, marginVertical: 10, position: "relative"}}>
    <WebView
      originWhitelist={["*"]}
      style={{width: "100%"}}
      onLoad={this.onLoad}
      onLoadEnd={this.onLoad}
      javaScriptEnabled={true}
      // useWebKit={false}
      injectedJavascript={this.state.injectedJavaScript}
      source={{html: this.state.html}}
      startInLoadingState={true}
    />
  </View>

The result is (on iOS simulator)

As you can see there are a couple of problems:

1. Since the container View must have a width and a height value it does not respect the embed size; sometimes it's taller sometimes it's smaller sometimes it's wider
2. The embed doesn't fit its container; I tried to put width: 100% but even if it fits the width I still have the container height fixed which leaves a lot of blank space.

I don't know where to put my hands, I tried a lot of hacky solution but it doesn't seem to work at all

解决方案

Did you tried using scalepagetofit property ?, it should match the view

这篇关于react-native style iframe 以适应 webview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！