react-native style iframe 以適應 webview

Question

我正在嘗試在 react-native 應用程序中實現各種embed ；

他們有這些結構

推特

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

在我的Component使用react-native-webview 模塊和此結構

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

結果是（在iOS模擬器上）

如您所見，有幾個問題：

1. 由於容器View必須具有width和height值，因此它不考慮embed大小； 有時高有時小有時寬
2. embed不適合它的容器； 我試圖把width: 100%但即使它適合width我仍然固定容器height ，這留下了很多空白空間。

我不知道該把手放在哪里，我嘗試了很多 hacky 解決方案，但似乎根本不起作用

Answer 1

您是否嘗試使用scalepagetofit屬性？，它應該與視圖匹配