Question

我正在使用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>

Answer 1

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

这里有个简单的例子：在您的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}}
      />
);
}

如何在React Native中更改预加载的iframe的高度宽度

1 个答案: