如何调整反应原生 webview 内容的大小？答案

【问题标题】：How to resize react native webview content?如何调整反应原生 webview 内容的大小？
【发布时间】：2018-01-21 11:45:23
【问题描述】：

这是我的代码，我正在尝试从我的 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 的高度。留下一个空白的滚动空间。

而且，修改webview组件的height根本没有任何作用。

我尝试修改父视图应用高度和宽度，但没有成功。

另外，我没有找到任何修改 webview 内容本身的道具。

有什么方法或 react-native 组件可以帮助我将 IP 摄像头流集成到我的应用程序中？

非常感谢任何建议。

编辑

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

编辑 2

我根据 sfratini 的回答更新了我的代码，但如果我设置启用滚动然后滚动，我可以看到始终有一部分图像未显示。好像react 不明白resize 到100%.. 很奇怪...

【问题讨论】：

你能否将此属性设置为 false scalesPageToFit for WebView 并尝试一下
什么都不做...
删除样式并设置它！你能解释更多和截图吗？
检查我的更新 :-) 但是，我无法删除 flex 样式，因为 webview 不会呈现。有什么建议吗？
这能回答你的问题吗？ React native: webview height

标签： react-native webview

【解决方案1】：

<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}
/>

【讨论】：

设置视口和比例可以解决我的问题。谢谢！如果没有这个元数据，我在 webview 中加载的地图分辨率非常低。
如果我使用函数而不是类，_onLoadEnd 的等价物是什么？

【解决方案2】：

设法为 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'}
  />

【讨论】：

【解决方案3】：

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




<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>

【讨论】：

【解决方案4】：

请注意，webview 具有标准样式和 containerStyle see documentation。我相信的标准样式有背景：白色，而 containerStyle 有 flex：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 }]}
    />
  );
}

希望这对某人有所帮助！

【讨论】：

【解决方案5】：

我相信你想要这个：

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

【讨论】：

感谢您的回答。不幸的是，react 似乎不想理解将大小调整为 100%，因为图像没有完全显示。如果我将 scrollEnabled 设置为 true，我可以看到它没有调整大小。请检查我对我的问题的更新以查看屏幕截图。
这不是 webview 正在加载的 url 的一部分吗？它的源代码是什么？我猜它有一个固定的宽度。