如何调整本机 webview 内容的大小？

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 的高度。留下一个空的滚动空间。

此外，修改heightwebview 组件的 根本没有任何作用。

我试图修改应用高度和宽度的父视图，但没有运气。

另外，我没有找到任何修改 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}
        />;