React Native 如何调整响应本地webview内容的大小？

hsgswve4 于 2022-12-23 发布在 React

关注(0)|答案(6)|浏览(268)

这是我的代码，我试图从我的IP摄像机加载流。

<View style={{flex:1,marginTop:70, flexDirection:'column', justifyContent:'space-between'}}>
    <Hue/>
    <View style={{flex:1}}>
        <WebView
        source={{uri: 'http://192.168.2.6:81/videostream.cgi?user=admin&pwd=XXXXX'}}
        style={{/*marginTop: 20, flex: 1, width:450, height:100*/}}
        javaScriptEnabled={false}
        domStorageEnabled={false}
        startInLoadingState={false}
        scalesPageToFit={false}
        scrollEnabled={true}
        />
    </View>
    <Text>Just some text</Text>

  </View>

<Hue/>是一个组件，用于检查WebView是否仍在加载（因为在正常情况下，如果它不是唯一的组件，则不会加载）。
width属性的行为不明确：减小它会增加网页视图的高度。留下一个空的滚动空间。
而且，修改webview组件的height根本不起任何作用。
我试图修改父视图应用高度和宽度没有运气。
而且，我也没有找到任何修改webview内容本身的 prop 。
是否有任何方法或React原生组件可以帮助我将IP摄像机流集成到应用程序中？
任何建议都是非常感谢的。

- 编辑**
- 根据Ashwin的评论更新了代码，但我仍然得到这个：**

- 编辑2**

我更新了我的代码，但如果我设置滚动启用，然后滚动，我能看到总是有一部分的图像不显示.似乎React不明白调整大小为100% ..这很奇怪...

react-native

来源：https://stackoverflow.com/questions/48366403/how-to-resize-react-native-webview-content

6条答案

按热度按时间

bz4sfanl1#

<WebView
  source={{
    uri: this.props.url
  }}
  style={{ height: height, width, resizeMode: 'cover', flex: 1 }}
  injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=width, initial-scale=0.5, maximum-scale=0.5, user-scalable=2.0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
  scalesPageToFit={false}
  onLoadEnd={this._onLoadEnd}
/>

赞(0）回复(0）举报 2022-12-23

rks48beu2#

成功地在iOS和Android上获得了相同的行为。谢谢Gowtham Palanisamy。

<WebView
    source={{ uri: url }}
    style={{ flex: 1 }}
    injectedJavaScript={`
     const iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
     if (!iOS) {
       const meta = document.createElement('meta');
       let initialScale = 1;
       if(screen.width <= 800) {
        initialScale = ((screen.width / window.innerWidth) + 0.1).toFixed(2);
       }
       const content = 'width=device-width, initial-scale=' + initialScale ;
       meta.setAttribute('name', 'viewport');
       meta.setAttribute('content', content);
       document.getElementsByTagName('head')[0].appendChild(meta);
     }
   `}
    scalesPageToFit={Platform.OS === 'ios'}
  />

赞(0）回复(0）举报 2022-12-23

tv6aics13#

需要注意是webview有标准样式和containerStyle，请参见文档。我认为标准样式有其背景：白色，并且containerStyle具有伸缩性：1.为了使图像具有响应性，我编写了如下代码（iframeWidth等于窗口宽度减去一些填充）：

if (node.name === 'img') {
  const imgHeight = Number(node.attribs.height);
  const imgAlt = node.attribs.alt;
  const imgSource = node.attribs.src;
  const imageHtml = `<img src="${imgSource}" height="${
    imgHeight * 2.3
  }" alt="${imgAlt}" />`;
  return (
    <WebView
      key={index}
      source={{ html: imageHtml }}
      startInLoadingState
      scalesPageToFit
      allowsInlineMediaPlayback
      domStorageEnabled
      style={{ backgroundColor: 'transparent' }}
      containerStyle={[{ flex: 0, width: iFrameWidth, height: imgHeight }]}
    />
  );
}

希望这对某人有帮助！

赞(0）回复(0）举报 2022-12-23

iqxoj9l94#

使用Gowtham Palanisamy的方法，将源内容设置为html输入，并将其viewport设置为在父容器中呈现内容。

<View>
  <WebView 
    javaScriptEnabled={false} 
    domStorageEnabled={false} 
    startInLoadingState={false} 
    scalesPageToFit={false} 
    scrollEnabled={true}
    source={{ 
      html: ` 
        <head>
          <meta content="width=width, initial-scale=1, maximum-scale=1" name="viewport"></meta>
        </head>
        <body style="background-image: url('${this.props.source}'); background-size:cover;"></body>
      `, 
    }} 
  />
</View>

赞(0）回复(0）举报 2022-12-23

9njqaruj5#

这样更好更准确

style={{ height: 350, width: '100%', resizeMode: 'cover', flex: 1 }}
injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
scalesPageToFit={true}

赞(0）回复(0）举报 2022-12-23

yuvru6vn6#

我相信你想要这个：

<WebView 
        source={this.props.source} 
        style={{
            width: '100%',
            height: 300
        }}
        scrollEnabled={false}
        />;

赞(0）回复(0）举报 2022-12-23

我来回答

React Native 如何调整响应本地webview内容的大小？

6条答案

相关问题

热门标签

最新问答