Javascript React Native-图像组件不接受源URI属性的变量

父组件将通过数据库调用接收的数据传递给子组件

正在呈现的子组件的代码如下所示：

import React, { Component } from 'react'
import { Image, View, Text } from 'react-native'

class ListItem extends Component {
  render () {
    const { name, image } = this.props.item

    return <View>
      <Image
        style={{ width: 50, height: 50 }}
        source={{ uri: image }} />
      <Text>
        {name}
      </Text>
    </View>
  }
}

export default ListItem

import React，{Component}来自“React”
从“react native”导入{Image，View，Text}
类ListItem扩展组件{
渲染（）{
const{name，image}=this.props.item
返回
{name}
}
}
导出默认列表项

在上面的代码中，没有图像显示，尽管50x50元素确实占用了空间（使用inspector查看）

正在测试的URL工作正常，当硬编码为以下内容时，图像会显示在应用程序中：

source={{uri:'testurl here'}}

我还使用了

console.log

来检查

image

prop是否在

return

调用之前存在。所有内容都表明数据库调用中已经存在URL（即

图像

道具）

另一方面，我最初使用react native的

ListItem

组件，并将

image

道具作为其

avatar

属性传递给它；同样的问题发生在图像没有显示的地方，只是一个灰色的框。通过设置以下各项，也可以解决此问题：

---

avatar={'testurl here'}

我们是否100%确定

image

是字符串？因为它在硬编码url时起作用，也许

图像

道具不是严格意义上的字符串

你可以试试这个

class ListItem extends Component {
  render () {
    const { name, image } = this.props.item;
    const sourceUri = { uri: image };

    return (
      <View>
        <Image
          style={{ width: 50, height: 50 }}
          source={sourceUri} />
      </View>
    );
  }
}

export default ListItem;

类ListItem扩展组件{
渲染（）{
const{name，image}=this.props.item；
const sourceUri={uri:image}；
返回(
);
}
}
导出默认列表项；