Question

我正在尝试在本机应用程序中实现各种embed；

它们具有这些结构

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

发现

<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中使用Component module和这个结构

    <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模拟器上）

如您所见，存在两个问题：

由于容器View必须具有width和height值，因此它不考虑embed的大小；有时更高，有时更小，有时又更宽
embed不适合其容器；我尝试放入width: 100%，但即使它适合width，我仍然固定了容器height，这留了很多空白。

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

Answer 1

您尝试使用scalepagetofit属性吗？它应该与视图匹配

反应本机风格iframe以适合网络视图

1 个答案: