Html 如何在react native中更改预加载iframe的高度和宽度_Html_React Native_Webview

Html 如何在react native中更改预加载iframe的高度和宽度

html react-native webview

Html 如何在react native中更改预加载iframe的高度和宽度,html,react-native,webview,Html,React Native,Webview,我使用的是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></

我使用的是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本机应用程序中显示此内容，但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之前添加一个最大宽度：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}}
      />
);
}