React Native WebView加载前白屏：如何修改背景色为#131416？

你遇到的问题是WebView加载前的白屏无法通过style的backgroundColor修改，这是因为初始白屏来自原生WebView组件的默认背景，而非React Native的样式层。以下是几种可行的解决方法：

方法一：使用WebView原生背景色Props #

直接给WebView组件添加backgroundColor属性（区别于style中的backgroundColor），同时将style里的背景设为透明，让原生背景色透出：

<WebView
  ref={webViewRef}
  source={{ uri: currentUrl.current }}
  style={{ flex: 1, backgroundColor: 'transparent' }}
  backgroundColor="#131416" // 控制原生WebView的初始背景
  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();
  }}
/>

方法二：容器包裹法 #

用一个View包裹WebView，给容器设置目标背景色，同时让WebView初始透明：

<View style={{ flex: 1, backgroundColor: '#131416' }}>
  <WebView
    ref={webViewRef}
    source={{ uri: currentUrl.current }}
    style={{ flex: 1, backgroundColor: 'transparent' }}
    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();
    }}
  />
</View>

方法三：修复renderLoading无效问题 #

如果之前用renderLoading没生效，要确保加载组件占满整个屏幕并设置正确背景，同时WebView设为透明：

import { ActivityIndicator, View } from 'react-native';

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

额外优化：网页背景同步 #

如果网页加载后背景仍为白色，可通过注入JS强制设置网页背景：

<WebView
  // 其他属性保持不变
  injectedJavaScript={`
    document.body.style.backgroundColor = '#131416';
    document.documentElement.style.backgroundColor = '#131416';
    true;
  `}
/>

内容的提问来源于stack exchange，提问作者devdean