我想在本机应用程序中显示res/drawable文件夹中的静态图像.但是,没有显示任何内容.

我在android子文件夹中有以下文件夹 struct :

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

如文档中所述,我try 使用以下代码从drawable文件夹加载图像文件:

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

我还try 了文件名和扩展名:

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

而且:

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

我try 了子文件夹:

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

不会显示任何图像.

但我正在寻找一种解决方案,像在真正的原生android应用程序中一样使用可绘制的图像.

UPDATE

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

这是一款带有"react native init"的标准RN应用程序,它刚刚添加了一个图像以显示在drawable文件夹中(仅限android).

有人能看一下,告诉我我做错了什么吗?

推荐答案

我终于明白了:<Image>标签需要具体的"宽度"和"高度"参数作为属性,而不仅仅是样式参数.

考虑到这一点,两种声明都将完美地发挥作用:

  <Image width={200} height={267} source={{uri: 'img_3665'}} style={{width: 200, height: 267}} />
  <Image width={200} height={267} source={require('image!img_3665')} style={{width: 200, height: 267}} />

React-native相关问答推荐

React-Native-Web 错误:rnw_blogpost.bundle.js:1414 Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

如何防止 VS Code 从react-native-web自动导入?

找不到变量:firebase/react native(expo)上的 IDBIndex

_react2.default.PropTypes.function 未定义

最近 react-native 版本中的Unable to resolve moduledebuggerWorker 错误

如何在react-navigation 中将props传递给screens/components

如何为 Picker 提供默认的Please select...选项?

React-Native iOS - 如何通过按下按钮从 React-Native 视图导航到非 React-Native 视图(本机 iOS 视图控制器)?

React Native localhost 另一个调试器已经连接

以编程方式在 React Native 中添加组件

由于端口 8081 sunproxyadmin,无法打包 react native

如何将 Tensorflow 与 react-native 一起使用?

React Native:当我从 XCode 运行应用程序时看不到 console.logs

DeviceInfo 原生模块未正确安装

带有 React Native 的 EventEmitter 和 Subscriber ES6 语法

React-native Awesome 元素没有构建 android 元素

react-native:如何覆盖组件中定义的默认样式

如何将 jest 测试移动到 /test 文件夹并让它们运行?

类型 androidx.appcompat.resources.R$dimen 被定义了多次

无法在react-native中分配给# 的只读属性props