反应本机的 webview 在加载完成之前显示白屏

Question

我尝试使用 webview 显示内容，但在网页加载完成之前屏幕显示白屏。 我想将白色更改为#131416。但样式选项不起作用。

我该如何解决这个问题？

   <WebView
          ref={webViewRef}
          source={{
            uri: currentUrl.current,
          }}
          style={{ flex: 1, backgroundColor: "#131416" }}
          onLoadStart={handleOnLoadStart}
          javaScriptEnabled={true}
          allowFileAccess={true}
          onMessage={handleMessage}
          onNavigationStateChange={setNavigationState}
          userAgent={userAgent}
          onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
          scrollEnabled={true}
          domStorageEnabled={true}
          startInLoadingState={true}
          onLoadEnd={handleOnLoadEnd}
          onContentProcessDidTerminate={() => {
            RNRestart.restart();
          }}
        />

我尝试更改样式并使用 renderLoading 道具，但不起作用。

Answer 1

用

WebView

包裹

View

（透明背景）并在那里定义所需的背景颜色。

<View style={{ flex: 1, backgroundColor: 'blue' }}>
  <WebView
    style={{ flex: 1, backgroundColor: 'transparent' }}
    source={{
      uri: 'https://google.com',
    }}
  />
</View>