无法在反应本机android中加载静态图像答案

【问题标题】：Cannot load static images in react native android无法在反应本机android中加载静态图像
【发布时间】：2018-02-01 09:52:53
【问题描述】：

我最近开始将 react native 集成到一个已经存在的 android 应用程序中。我已经尝试了https://facebook.github.io/react-native/docs/images.html页面上提到的多种图像加载样式

方法 1（混合应用程序）：对于 android 使用 <Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} /> 此方法不会在应用程序上加载任何内容，只会加载一个 40X40 的空白区域。

方法二：<Image source={require('./my-icon.png')} /> 我使用了图像的绝对路径app/res/drawable-hdpi/image.png，但它也不起作用。

得到错误

Unable to resolve module `../app/res/drawable-hdpi/image.png` from 
`/Users/MyName/StudioProjects/reatProject/android/react-native/index.js`: could not resolve 
`/Users/MyName/StudioProjects/reatProject/android/app/res/drawable-hdpi/image.png' as a file nor as a folder

我总是在样式图中提供高度和宽度属性。

我的项目结构是

android/
  app/
    res/
    src/
    tests/
  react-native/
    index.js
    package.json
    package.lock.json
  tests/
  build.gradle

项目build.gradle 文件包含作为maven { url "$rootDir/react-native/node_modules/react-native/android" } 的maven 存储库

我在 react native github 问题上发布了这个问题，但在那里没有解决方案，所以在这里询问是否有人遇到过同样的问题。我对本机反应还很陌生，所以也许我做错了什么。

【问题讨论】：

我不确定到底发生了什么，但文件夹结构似乎有点奇怪。通常你应该在根文件夹中的 react-folder 中包含一些东西，以及 src、android、node_modules 等。
尝试移动到一般文件夹结构，它可能会为您解决问题，因为文件和图像使用相对路径链接，并且它们具有它们寻找的默认公共路径。祝你好运，让我知道结果如何。
对，文件夹结构的移动就是我们想要保持这种方式的东西。即使保留原始结构（react native 推荐的结构），我也只能将 require 与特定可绘制文件夹中图像的绝对路径一起使用，例如 drawable-hdpi。仍然不能解决所有屏幕正确加载的图像。即便如此，asset:/ 方案似乎也不起作用。我们不想将所有资产移动到带有@2x 和@3x 的单独反应资产文件夹

标签： react-native react-native-android

【解决方案1】：

我最终犯了一个错误。图像源必须是{{uri:"name"}} 的形式，我一直在写{{uri:"name.png"}}。它不接受此方案中的 png，但在 asset:// 和 require 方案中，它可以。只是有点混乱。

对于遇到相同问题的任何人，相同的目录结构都可以，只需以这种方式使用图像，并避免使用扩展。

<Image source={{uri:"imageName"}} style={{height:100, width:100}}/>

【讨论】：