React Native WebView闪屏后出现白屏问题如何排查解决

你的代码存在3个直接导致闪屏后白屏的问题：

• 存在冗余死代码：你在主App组件内部又定义了一个同名App组件写加载指示器，这段代码永远不会被渲染，闪屏消失后WebView还处于资源加载阶段，没有任何兜底UI就会露出白屏
• 缺少必要依赖导入：写加载指示器用到的View组件没有从react-native导入，就算要渲染加载UI也会直接报错
• WebView缺少加载状态控制：没有监听WebView的加载开始/结束事件，也没有对应配置适配双端的WebView渲染逻辑，白屏阶段完全没有干预手段

清理冗余的死代码，新增加载状态标记，在WebView首屏资源加载完成前显示居中的加载指示器，等页面加载完成后再显示WebView内容，同时补全双端WebView的基础配置减少渲染等待时间。
完整修复后的app.js代码：

import React, { useRef, useState, useCallback, useEffect } from "react";
import { BackHandler, Platform, StyleSheet, ActivityIndicator, View } from "react-native";
import { WebView } from "react-native-webview";

export default function App() {
  const webView = useRef();
  const [canGoBack, setCanGoBack] = useState(false);
  // 新增加载状态标记
  const [isLoading, setIsLoading] = useState(true);

  const handleBack = useCallback(() => {
    if (canGoBack && webView.current) {
      webView.current.goBack();
      return true;
    }
    return false;
  }, [canGoBack]);

  useEffect(() => {
    BackHandler.addEventListener("hardwareBackPress", handleBack);
    return () => {
      BackHandler.removeEventListener("hardwareBackPress", handleBack);
    };
  }, [handleBack]);

  const styles = StyleSheet.create({
    container: {
      flex: 1
    },
    loadingMask: {
      ...StyleSheet.absoluteFillObject,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#fff'
    },
    webView: Platform.OS === 'ios' 
      ? { marginTop: 30, marginBottom: 40, flex: 1 }
      : { marginTop: 30, flex: 1 }
  });

  return (
    <View style={styles.container}>
      <WebView
        ref={webView}
        source={{ uri: "https://www.talesrunnerbestguild.co.kr/" }}
        style={styles.webView}
        onLoadStart={() => setIsLoading(true)}
        onLoadEnd={() => setIsLoading(false)}
        onLoadProgress={(event) => setCanGoBack(event.nativeEvent.canGoBack)}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        scalesPageToFit={Platform.OS === 'android'}
      />
      {/* 加载阶段覆盖加载指示器，挡住未渲染完成的WebView白屏 */}
      {isLoading && (
        <View style={styles.loadingMask}>
          <ActivityIndicator size="large" color="#2563eb" />
        </View>
      )}
    </View>
  );
}

• 想要完全消除白屏间隙，可以配置原生闪屏延迟隐藏，等WebView触发onLoadEnd回调后再调用原生方法关闭闪屏，实现从闪屏到网页内容的无缝衔接
• 可以给WebView设置和目标网页一致的背景色，避免加载过程中出现突兀的颜色跳变
• Android端可开启WebView缓存策略，二次启动时优先加载本地缓存资源，进一步缩短加载时长

内容的提问来源于stack exchange，提问作者김준석