Question

我想在ReactNative-App中显示来自res / drawable-folder的静态图像。但是，没有显示任何内容。

我在android-sub文件夹中有以下文件夹结构：

macbook:CompanyApp hagen$ tree android/app/src/main/res/
android/app/src/main/res/
├── drawable
│   ├── a1456.jpg
│   └── a1457.jpg
├── mipmap-hdpi
│   └── ic_launcher.png
├── mipmap-mdpi
│   └── ic_launcher.png
├── mipmap-xhdpi
│   └── ic_launcher.png
├── mipmap-xxhdpi
│   └── ic_launcher.png
└── values
    ├── strings.xml
    └── styles.xml

6 directories, 8 files

如文档中所述，我尝试使用以下代码从drawable-folder加载图像文件：

<Image source={{uri: 'a1456'}} style={{width: 140, height: 140}} />

我还尝试了文件名和扩展名：

<Image source={{uri: 'a1456.jpg'}} style={{width: 140, height: 140}} />

还有：

<Image source={require('image!a1456')} style={{width: 140, height: 140, backgroundColor: 'yellow'}} />

我尝试了子文件夹：

<Image source={{uri: 'drawable/a1456.jpg'}} style={{width: 140, height: 140}} />

不会显示任何图像。例如，在当前文件夹中使用图像源中的require语句为本地图像工作正常。

但我正在寻找一种解决方案，以便在真正的原生Android应用程序中使用drawable-images。

更新

我刚刚在github上发布了一个示例项目：https://github.com/itinance/testdrawable

这是一个标准的RN-App，带有＆＃34; react-native init＆＃34;并添加了一个图像以显示在drawable-folder（仅限android）。

有人可以看看它并告诉我我做错了吗？

Answer 1

最后我明白了：sys.path.append(os.path.abspath("/path/to/plugin/scripts"))标签需要具体的＆＃34;宽度＆＃34;和＆＃34;身高＆＃34;参数作为属性，不仅仅作为样式参数。

考虑到这一点，两个声明都将完美地运作：

<image>

Answer 2

示例项目结构 - 我的应用名称是MyProject

val items = xml \\ "channel" \\ "item"
items map {
  nodes => (textFor(nodes, "title"), textFor(nodes, "link"))
}

def textFor(ns: NodeSeq, tag: String) = (ns \\ tag) map (_.text.trim)

使用驻留在资源目录中的图像

Myproject
├── ios
├── android
├── resource  //folder for static content
    └── image.png

希望它会有所帮助！

Answer 3

将图像保存在可绘制文件夹中，然后您可以添加此代码。这适合我。 <Image style={styles.imageStyle} source={ { uri: icon + `${Platform.OS === 'ios' ? '.jpg' : ''}` }} />

Answer 4

在导入块中添加图像组件。

导入{ 平台， StyleSheet，文本，视图，图片 }来自“ react-native”；
在渲染的返回块中添加图片标签。 Image标签中的Source属性，我们在其中指定图像位置。另外，我们还在图像标签中添加了内联样式，这有助于根据设备宽度设置图像大小。对于Android资产文件夹中的图像，请使用asset：/ scheme

如何从ReactNative-App中的res / drawable-folder加载图像？

4 个答案: