React Native引用assets下splash.png资源找不到问题求助

你的代码存在以下导致资源加载失败、运行报错的问题：

• require() 引用React Native本地静态资源时，必须使用相对于当前代码文件的相对路径，你写的/talesrunner23/assets/splash.png/是系统根目录的绝对路径，打包器无法扫描到对应资源
• 图片路径末尾多写了斜杠/，将文件路径写成了目录路径，打包器会把它识别为文件夹而非png文件
• 没有从react-native包中导入Image组件，即使路径正确组件也无法正常渲染
• 残留无效代码：handleBack回调里有复制代码时带入的`enter code here`占位符，会触发语法错误
• 启动页延迟逻辑错误：setTimeout的时间单位是毫秒，你写的30 * DELAY_BEFORE_WEBVIEW实际仅300毫秒，启动页会一闪而过，和注释标注的10秒展示时长不符

请先确认你的项目目录为标准React Native结构，即你编写代码的App.js文件位于项目根目录，和assets文件夹同级：

talesrunner23/
├── App.js
└── assets/
    └── splash.png

如果你的App.js放在其他子目录（比如src/文件夹），只需要对应调整图片引用的相对路径层级即可，每深一级目录多写一个../。

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

// 启动页展示时长，单位：秒
const DELAY_BEFORE_WEBVIEW = 10;
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]);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, DELAY_BEFORE_WEBVIEW * 1000);
  }, []);

  return (
    <View style={styles.container}>
      <WebView
        ref={webView}
        source={{ uri: 'https://www.talesrunnerbestguild.co.kr/' }}
        style={styles.webView}
        onLoadProgress={(event) => setCanGoBack(event.nativeEvent.canGoBack)}
      />
      {isLoading && <CenterLoader />}
    </View>
  );
}

const CenterLoader = () => (
  <View style={styles.loaderContainer}> 
    <Image 
      source={require('./assets/splash.png')} 
      style={{height: 100, width: 100}}
    />
  </View>
);

const styles = StyleSheet.create({
  container: { flex: 1 },
  loaderContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: 'white'
  },
  webView:
    Platform.OS === 'ios'
      ? { marginTop: 30, marginBottom: 40 }
      : { marginTop: 30 },
});

替换代码后如果仍然提示资源找不到，执行以下命令清除打包缓存后重新运行项目即可：
npx react-native start --reset-cache

注意：require()引用本地静态资源时，路径不能拼接变量，React Native打包器会在编译阶段静态扫描所有require路径，使用变量会导致资源无法被打包进安装包。

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