react-native style iframe to fit webview

问题

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:

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

回答1:

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

来源：https://stackoverflow.com/questions/54025762/react-native-style-iframe-to-fit-webview

标签

css

reactjs

react-native

webview