反应本机要求不适用于图像源

2024-01-27

给出下面的代码,反应本机抱怨



Requiring unknown module "../../images/Foo.png".If you are sure the module is there, try restarting the packager or running "npm install".
  

但是如果我将图像源路径硬编码在中,相同的代码可以正常工作require call.

代码不起作用:有一个方法调用来确定图标名称。注意require('../../images/'+imageIconNameFor(prediction.type) line.

const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}>
    <View style={styles.predictionItem}>
        <Image style={styles.predictionIcon} source={require('../../images/'+imageIconNameFor(prediction.type))}></Image>
    </View>
</TouchableHighlight>
);
function imageIconNameFor(predictionType) {
    return "Foo.png";
}

代码工作:如果我将图标名称硬编码在require打电话,效果很好。注意require('../../images/Foo.png') line.

const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}>
    <View style={styles.predictionItem}>
        <Image style={styles.predictionIcon} source={require('../../images/Foo.png')}></Image>
    </View>
</TouchableHighlight>
);
function imageIconNameFor(predictionType) {
    return "Foo.png";
}

当我连接字符串来构建图像源时,为什么会有不同的行为?
Why require('../../images/'+imageIconNameFor(prediction.type)无法渲染图像,但是require('../../images/Foo.png')工作正常?

请注意,方法调用不是问题。错误消息包含使用方法调用计算的图像的完整路径。尽管有完整的路径,React Native还是抱怨缺少带有require的模块。
React 本机版本是0.37.0。我在 ios 模拟器上测试了这个。


不幸的是,这就是react-native打包器的工作原理,require中的图像名称必须是静态的。这是官方的例子docs https://facebook.github.io/react-native/releases/next/docs/images.html:

// GOOD
<Image source={require('./my-icon.png')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// GOOD
var icon = this.props.active ? require('./my-icon-active.png') :     require('./my-icon-inactive.png');
<Image source={icon} />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

反应本机要求不适用于图像源 的相关文章

随机推荐

  • Visual Studio 2019 Xamarin.Forms 项目中未命中断点

    我正在开发 Xamarin Forms 添加 我不知道昨天是否在 Visual Studio 2019 上更新 16 5 1 是原因 但是当我处于调试模式时 在 Android 项目上与我的设备连接时断点不会命中 有趣的是我的应用程序运行正
  • Bootstrap colorpicker 基本示例不起作用

    我想为 bootstrap 使用颜色选择器插件 https farbelous io bootstrap colorpicker index html https farbelous io bootstrap colorpicker ind
  • 迭代c中的结构体

    我正在编写一个与此代码类似的单元测试 并且我正在尝试在设置值时测试它们 以便我知道发生了什么 当我运行以下代码时 我不明白为什么 ptr 值没有设置为 1 相反 当我运行它时 它给出的输出为 10 64 0 0 任何解释或建议将不胜感激 i
  • VBS 中的 MSGbox 根据变量值进行更新

    只是想知道我如何拥有一个 MSgbox 来显示不断变化的变量值 基本上 一个数字每次循环时都会添加一个 我想在不必打开一百万个窗口的 MSGbox 中显示它 解决方法是使用PopUp Set objShell WScript CreateO
  • 如何将值查询集的值追加到数组?

    我的观点 py from django db models import Count def test1 request states Loksabha objects values state distinct state terms L
  • Ionic 导航栏:标题未在 Android 设备上居中

    我对 Ionic 很陌生 但我已经喜欢它了 我想用nav bar所以我实现了以下index html
  • 编写不使用循环索引的 for 循环的 Pythonic 方法[重复]

    这个问题在这里已经有答案了 这与以下代码有关 该代码使用 for 循环生成一系列随机偏移量以供程序中其他地方使用 该 for 循环的索引未使用 这导致 Eclipse PyDev 将 有问题的 代码突出显示为警告 def RandomSam
  • 如何在 Actionscript 3 中将十六进制转换为十进制?

    如何在 Actionscript3 中将十六进制 字符串 转换为十进制 int Number int and uint类有toString 接受的方法radix作为参数 radix指定用于数字到字符串转换的数字基数 从 2 到 36 如果不
  • 如何从 DOM 中删除 element.nativeElement?

    我尝试了这样的方法 ViewChild draggable private draggableElement ElementRef this draggableElement nativeElement remove HTML div Bl
  • MVC3 ajax 将多个复选框值发送到控制器

    我正在尝试使用 MVC3 来完成以下任务 我有一个包含多个值的表 使用ajax我希望能够选择作为表一部分的删除复选框 对于任意数量的行 使用ajax将结果发布到控制器进行处理 我目前遇到的问题是我无法让控制器接受来自 ajax post 的
  • Websocket 因 1006 错误而断开连接,无原因

    我正在我的网页游戏中记录断开连接 似乎 75 的会话因代码 1001 正常 而断开连接 25 的会话因代码 1006 错误 而断开连接 https www rfc editor org rfc rfc6455 https www rfc e
  • 五个不同的 GAE 站点可以共享一个公共数据存储吗?

    除了特定站点的数据存储之外 您是否还可以在所有网站之间共享一个数据存储 比如连接到与主 MySQL 数据库不同的 MySQL 数据库 并不真地 两种解决方法 使用同一应用程序的五个 版本 而不是五个不同的应用程序 他们将共享相同的数据存储
  • 将 python django 项目 1.3 升级到 1.5

    目前我有一个使用 django 版本 1 3 的 python 项目在 Mountain Lion OS 上运行 现在我想将其升级到 django 1 5 但是当我把它放在尝试做的时候python manage py runserver我收
  • 具有 SFINAE 虚拟参数的不明确模板

    考虑一种需要验证类型的情况T与另一个模板g 可能是一些enable if表达式 例如 在另一个模板的虚拟参数内 如下所示 template
  • ConnectionString 属性尚未初始化

    我查看了不同论坛上的很多帖子 其他人也收到了同样的错误 大多数人表示他们没有正确引用 web config 文件中的连接字符串 或者他们在设置连接字符串之前尝试打开连接 好吧 如果对我来说是这种情况 那么它如何在两个不同的系统上工作 但在第
  • 如何在 CertCreate 自签名证书函数中指定密钥大小

    我正在使用该功能证书创建自签名证书 https msdn microsoft com en us library windows desktop aa376039 v vs 85 aspx生成证书 我需要指定密钥大小2048 我不知道如何提
  • javascript按索引号进行字符串分配怪癖

    a 12345 a 2 3 a 2 9 console log a gt 12345 到底是怎么回事 这个怪癖导致我痛苦地调试了1个小时 如何以明智的方式避免这种情况 不能使用方括号重写字符串中的各个字符 仅 getter 即读取 访问可用
  • Github 操作 `on` 中没有定义事件触发器

    我创建了一个管道 我想在每次推送任何分支时触发 有我的default yml name default on push branches jobs build runs on macOS latest steps uses actions
  • 模板类的 typedef?

    是否有可能typedef使用模板的长类型 例如 template
  • 反应本机要求不适用于图像源

    给出下面的代码 反应本机抱怨 Requiring unknown module images Foo png If you are sure the module is there try restarting the packager o