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}
}

我正在渲染内部使用this.state作为源

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

当我需要一个占位符图像时，我奇怪地得到11，而react native抛出错误，说“ uri的值不能从Double转换为String”。

非常感谢您的帮助。

谢谢

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}

Answer 2

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

<Image source={11} />

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