Question

这是我的代码，我正在尝试从我的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内容的道具。

有什么方法，或者反应本机组件可以帮助我在我的应用程序中集成我的IP摄像机流吗？

非常感谢任何建议。

修改

根据Ashwin的评论更新了代码，我仍然明白：

编辑2

我根据sfratini答案更新了我的代码，但是如果我设置了滚动功能然后滚动，我就能看到总是有一部分图像没有显示。似乎反应不明白调整到100％..这很奇怪......

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

Answer 2

我相信你想要这个：

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

Answer 3

请注意，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 }]}
    />
  );
}

希望这对某人有所帮助！

如何调整原生webview内容的大小？

3 个答案: