React Native 无法完全隐藏 Webview

Question

我正在使用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>',
}}
/>

谢谢!

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