React-native 在同一目录中找不到图像答案

【问题标题】：React-native cannot find images within same directoryReact-native 在同一目录中找不到图像
【发布时间】：2019-07-26 22:43:40
【问题描述】：

我正在从 Xcode 10.3 运行 React Native 应用程序，并尝试在 detailView 屏幕中加载一些图标图像，但无论出于何种原因，React Native 都无法看到它们。无论我是重新加载还是重建项目（react-native run-ios），我都会收到以下错误消息：

/Path/To/Project/src/components/DetailView.js：无法从/Path/To/Project/src/components/DetailView.js 找到模块../images/call@2x.png。事实上，这些文件都不存在：

call@2x.png
/Path/To/Project/src/images/call@2x.png/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

这是我项目的 src 目录：

这张图片来自我的 detailView.js：

<ScrollView showsVerticalScrollIndicator={false}>
    <Image
        source={require('../images/background.jpg')}
        style={[theme.cardImageStyle, styles.image]}
    />
</ScrollView>

// ... More code here

<View style={styles.actionArea}>
    <TouchableOpacity>
        <Image
            source={require('../images/call@2x.png')}
            style={styles.actionImage}
        />
    </TouchableOpacity>
    <TouchableOpacity>
        <Image
            source={require('../images/sms@2x.png')}
            style={styles.actionImage}
        />
    </TouchableOpacity>
    <TouchableOpacity>
        <Image
            source={require('../images/email@2x.png')}
            style={styles.actionImage}
        />
    </TouchableOpacity>                
</View>

这是来自 package.json 的我的依赖项列表：

"dependencies": {
    "lodash": "^4.17.15",
    "react": "16.8.6",
    "react-native": "0.60.4",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-material-kit": "^0.5.1",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^3.11.1",
    "react-redux": "^7.1.0",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "eslint": "^6.1.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },

奇怪的是找到background.jpg文件没有问题，但是无论我是否在require()中更改我要查找的文件的名称，我都会收到相同的错误消息强>声明。我认为这是 RN 或 Xcode 如何构建项目的问题（Xcode 现在正在杀死我，移动速度比 90 秒拨号慢）。

非常感谢所有帮助。

【问题讨论】：

标签： image react-native

【解决方案1】：

从图像路径中删除 @2x 或尝试为不同的屏幕密度制作其他文件，如下所示：

call@1x.png
call@2x.png
call@3x.png

那就用

source={require('../images/call.png')

DOCS

【讨论】：

【解决方案2】：

从图片路径中去掉@2x 后缀，它们是为了提供不同屏幕密度的图片而保留的，只是

source={require('../images/call.png')

来自 RN 图片docs

the packager will bundle and serve the image corresponding to device's screen density.
If there is no image matching the screen density, the closest best option will be selected

您无需自行指定图片对应设备的尺寸

【讨论】：