React Native 无法完全隐藏 Webview答案

【问题标题】：React Native can't fully hide WebviewReact Native 无法完全隐藏 Webview
【发布时间】：2021-02-17 14:57:49
【问题描述】：

我正在使用 webview 在后台播放 mp3 文件。然而，即使我给它一个宽度、高度为零和一个绝对位置，它仍然会覆盖空间并将其他组件推到屏幕上。

        <WebView
        ref={(ref) => (this.webview = ref)}
        originWhitelist={["*"]}
        mediaPlaybackRequiresUserAction={false}
        useWebKit={true}
        style={{position: "absolute", width: 0, height: 0}}
        source={{
          html:
            '<audio id="audio" loop> <source src="http://n0a.radiojar.com/bw66d94ksg8uv?rj-ttl=5&rj-tok=AAABd7AnCL0AOBTlERLEzbnm9Q" type="audio/mp3" /> </audio>',
        }}
        />

谢谢！

【问题讨论】：

标签： reactjs react-native mobile webview expo

【解决方案1】：

你应该使用 containerStyle 属性而不是 style：

      <WebView
        ref={(ref) => (this.webview = ref)}
        originWhitelist={["*"]}
        mediaPlaybackRequiresUserAction={false}
        containerStyle={{ position: "absolute", width: 0, height: 0 }} // <=== your prop
        useWebKit={true}
        source={{
          html:
            '<audio id="audio" loop> <source src="http://n0a.radiojar.com/bw66d94ksg8uv?rj-ttl=5&rj-tok=AAABd7AnCL0AOBTlERLEzbnm9Q" type="audio/mp3" /> </audio>',
        }}
      />

或将视图用作容器

    <View style={{position: "absolute", width: 0, height: 0}}>
      <WebView
        ref={(ref) => (this.webview = ref)}
        originWhitelist={["*"]}
        mediaPlaybackRequiresUserAction={false}
        useWebKit={true}
        source={{
          html:
            '<audio id="audio" loop> <source src="http://n0a.radiojar.com/bw66d94ksg8uv?rj-ttl=5&rj-tok=AAABd7AnCL0AOBTlERLEzbnm9Q" type="audio/mp3" /> </audio>',
        }}
      />
    </View>

【讨论】：