React Native 无法完全隐藏 Webview

Question

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

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

React Native 无法完全隐藏 Webview

React Native can't fully hide Webview

mobile

webview

reactjs

react-native

expo