React Native require(image) 返回数字

11 浏览
0 Comments

React Native require(image) 返回数字

我有一个js文件，其中包含一个组件EventCard，它接受事件名称、日期、事件图片等。如果事件图片不存在，我想加载一个占位图片。现在这个语句看起来像这样：

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

我在渲染中使用this.state来设置source，如下所示：

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

当我为占位图片执行require操作时，出现奇怪的11，并且React Native抛出错误，提示“无法将uri的值从Double转换为String”。

非常感谢您的帮助。

谢谢。

0

3 答案

0 Comments

React Native中的require(image)返回一个数字的原因是因为图片资源在React Native中被编译为数字的标识符。这样做是为了提高应用程序的性能。

要解决这个问题，可以按照以下步骤操作：

1. 在构造函数中定义一个变量imgUrl，它的值为props中的image属性，如果props中没有定义image属性，则将其设置为null。

constructor(props){

super(props);

let imgUrl = props.image ? props.image : null

this.state = {image: imgUrl}

}

2. 在需要使用图片的地方，使用条件语句判断imgUrl是否为null，如果为null，则使用require方法引入默认图片资源，否则使用this.state.image。

source={imgUrl == null ? require("../assets/images/image.jpg") : this.state.image}

通过以上步骤，可以实现在React Native中使用require(image)返回的是一个数字的图片资源，并根据需要切换默认图片和自定义图片。

0
0 Comments

React Native中的require(image)返回number的原因是因为在React Native中，require函数加载的是一个资源，而不是一个图片对象。当我们使用require(image)时，它实际上返回的是一个代表该资源的数字标识符，而不是一个图片对象本身。因此，我们可以直接使用这个数字标识符作为Image组件的source属性值，来展示本地资源对应的图片。

解决这个问题的方法是，如果想要展示服务器发送的URL或者本地资源的图片，可以根据需求选择使用{uri: "image-link"}或者require("image")。其中，{uri: "image-link"}表示使用服务器发送的URL作为图片的source属性值，而require("image")表示使用本地资源对应的数字标识符作为图片的source属性值。

虽然某些情况下了直接使用数字标识符作为source属性值的方法，但是并不推荐这种做法，因为如果你在代码中添加更多的require语句，数字标识符可能会发生变化，导致展示的图片不正确。

此外，还有一些同学遇到了一些其他问题，比如将SVG格式的图片作为source属性值时无法正常显示，解决方法是将SVG图片替换为PNG图片。

，React Native中的require(image)返回number的原因是因为require函数加载的是一个资源，而不是一个图片对象。解决这个问题的方法是根据需求选择使用{uri: "image-link"}或者require("image")作为Image组件的source属性值。不推荐直接使用数字标识符作为source属性值，因为它们可能会发生变化。

0
0 Comments

React Native中使用require(image)返回的是一个数字，而不是一个图片路径。这可能导致在使用require时出现问题。解决这个问题的方法是直接将图片源指定给image的source属性。

在构造函数中，可以使用以下代码将图片路径赋值给imgUrl变量：

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

然后在render函数中，可以使用以下代码将图片源指定给image的source属性：

source={this.state.image}

感谢你的努力，这确实起作用了。我之前不知道require返回的是一个数字，你的答案让我想到了这一点。

很高兴能帮到你。我之前也遇到过同样的问题！

真是太糟糕了！我竟然忽略了这一点，在官方文档中是这样说明的，但他们没有提醒注意这个差异。谢谢你！

0