React Native设置自定义Splash启动页显示5秒后加载WebView

修正点说明 #

• 补全原代码缺失的View、Image基础组件导入
• 删除原代码中重复定义的内部App组件、测试用的冗余加载指示器代码
• 新增启动页显示状态控制变量
• 新增5秒延时切换逻辑，启动图展示满5秒后自动加载WebView内容
• 新增启动图全屏展示适配样式，保留原有的返回键拦截、平台端边距适配逻辑

完整代码 #

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

// 替换为你assets目录下实际的启动图文件路径
const SPLASH_IMG = require('./assets/splash.png');

export default function App() {
  const webView = useRef();
  const [canGoBack, setCanGoBack] = useState(false);
  // 启动页默认显示
  const [isSplashShow, setIsSplashShow] = useState(true);

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

  useEffect(() => {
    BackHandler.addEventListener("hardwareBackPress", handleBack);
    // 5秒后隐藏启动页
    const splashTimer = setTimeout(() => {
      setIsSplashShow(false);
    }, 5000);

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

  // 启动页展示阶段，全屏渲染自定义启动图
  if (isSplashShow) {
    return (
      <View style={styles.splashWrap}>
        <Image
          source={SPLASH_IMG}
          style={styles.splashImg}
          resizeMode="cover"
        />
      </View>
    );
  }

  // 倒计时结束后渲染WebView
  return (
    <WebView
      ref={webView}
      source={{ uri: "https://www.talesrunnerbestguild.co.kr/" }}
      style={platformStyles.webView}
      onLoadProgress={(event) => setCanGoBack(event.nativeEvent.canGoBack)}
    />
  );
}

const styles = StyleSheet.create({
  splashWrap: {
    flex: 1,
    // 可修改为和启动图匹配的背景色
    backgroundColor: '#ffffff'
  },
  splashImg: {
    width: '100%',
    height: '100%'
  }
});

const platformStyles = StyleSheet.create({
  webView: Platform.OS === 'ios'
    ? { marginTop: 30, marginBottom: 40 }
    : { marginTop: 30 }
});

使用说明 #

• 将代码中require('./assets/splash.png')的路径替换为你项目中实际存放启动图的路径和文件名
• 如果需要启动图完整展示不被裁剪，将Image组件的resizeMode属性值从cover改为contain
• 若需要调整启动页停留时长，修改setTimeout第二个参数即可，单位为毫秒
• 确保项目assets目录已在metro打包配置中正确关联，避免图片加载失败

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