React Native require(image) 返回数字

Question

我有一个带有一个组件 EventCard 的 js 文件，它采用事件名称、日期、事件图像等。如果事件图像不存在，我想加载一个占位符图像。现在该语句看起来像这样

constructor(props){
    super(props);
    let imgUrl = props.image ? props.image : require("../assets/images/image.jpg");
    this.state = {image: imgUrl}
}

我在 render 内部使用 this.state 作为源代码

source={{uri: this.state.image}}

在对占位符图像执行要求时，我奇怪地得到 11，并且本机反应抛出错误，提示“uri 的值无法从 Double 转换为 String”。

非常感谢您的帮助。

谢谢

原文由 Kireeti K 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 require 时需要直接指定图片源。

 constructor(props){
  super(props);
  let imgUrl = props.image ? { uri: props.image } : require("../assets/images/image.jpg");
  this.state = { image: imgUrl };
}

然后在你的渲染中：

 source={this.state.image}

原文由 Fawaz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

经过一些研究和@Fawaz 和@Haider 的一些帮助后，我明白 require 返回一个数字。这意味着我们可以直接在 source 中使用数字而不是 require 并且它有效

<Image source={11} />

如果您有与该编号对应的任何图像，这应该会显示来自本地资源的图像。因此，当想要决定是显示服务器发送的 url 还是像我这样的本地资源时。我们可以使用@Fawaz 的答案，它基本上插入一个 {uri: “image-link”} 或 require(“image”) ，其中 require 将被解析为一个数字，当与 source 一起使用时，您将放置对象或数字根据文档的标准方法。

原文由 Kireeti K 发布，翻译遵循 CC BY-SA 4.0 许可协议