React Native - 无法解决模块 - 即使路径正确

Question

所以我尝试在 React Native 的 javascript 代码中使用一些图像。这是我的文件夹： enter image description here

只要我尝试使用以下命令导入它：

import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { SimpleAnimation } from 'react-native-simple-animations';
//here i try to import my picture
import iconBright from 'testproject/pictures/iconBright.png';


export default function Welcome() {
  return (
    <View style={styles.container}>
    <SimpleAnimation delay={500} duration={1000} fade staticType='zoom'>
     //also here i am trying to import it but same error
    <Image source={require('testproject/pictures/iconBright.png')}></Image>
    </SimpleAnimation>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {

  },
});

当我编译它时，我总是得到这个错误：

Unable to resolve "pictures/iconBright.png" from "screens\Welcome.js"

我从互联网和其他 stackoverlow 建议中尝试了许多不同的方法，但都没有奏效。我也试过了：

• ./pictures/iconBright.png
• ../pictures/iconBright.png

但是没有任何效果。有人可以帮助我或解释一下这个路径系统是如何工作的，因为我还没有找到任何有用的指南。

编辑： 这里是设备上的错误：

Unable to resolve module `../pictures/iconBright.PNG` from `screens\Welcome.js`: 

None of these files exist:
  * pictures\iconBright.PNG(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
  * pictures\iconBright.PNG\index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)

Answer 1

您的图片大写为 .PNG，导入时为 .png

我会将图像重命名为 .png 并尝试