如何在本机反应中更改预加载 iframe 的高度宽度答案

【问题标题】：how to change height width of preloaded iframe in react native如何在本机反应中更改预加载 iframe 的高度宽度
【发布时间】：2018-12-19 06:23:38
【问题描述】：

我正在使用 api 来响应此代码

<p> <iframe width="1165" height="655" src="https://www.youtube.com/embed/sJUCMmYsN1A?feature=oembed" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>

我正在使用 WebView 在 React Native App 中显示此内容，但 iframe 视频高度宽度太长。

有什么建议吗？？

<View style={{width: width, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}} >
          <Text style={{fontSize: 18}}>Description here</Text>
          {/* <HTML 
            html={product.description} 
            imagesMaxWidth={Dimensions.get('window').width} 
            staticContentMaxWidth={200}
          /> */}
          <WebView 
            source={{html: product.description}}
            bounces={false}         // IOS Only
            dataDetectorTypes='link'
            scalesPageToFit={true}
            scrollEnabled={false}
            automaticallyAdjustContentInsets={false}
            mediaPlaybackRequiresUserAction={true}
            style={{marginRight: 10, marginLeft: 10, marginRight:10, width: width, height: 1000}}
          />
        </View>

【问题讨论】：

标签： html react-native webview

【解决方案1】：

有很多方法可以解决这个问题

这是一个快速的：在您的 html 之前添加一个 max-width: 100% 样式字符串，如下所示：

render() {

//write a css that enforces max-width: 100% on iframe
const htmlStyleFix = `<style type="text/css">iframe{max-width: 100%;}</style>`;

// add it just before the html you're getting from your API
// this could be htmlStr= htmlStyleFix + product.description
const htmlStr = `${htmlStyleFix}<p><iframe width="1165" height="655" src="https://www.youtube.com/embed/sJUCMmYsN1A?feature=oembed" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>`;

return (
    <WebView 
        source={{html: htmlStr}} // use the custom html string you created above
        bounces={false}         // IOS Only
        dataDetectorTypes='link'
        scalesPageToFit={true}
        scrollEnabled={false}
        automaticallyAdjustContentInsets={false}
        mediaPlaybackRequiresUserAction={true}
        style={{marginRight: 10, marginLeft: 10,  height: 1000}}
      />
);
}

【讨论】：