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

Question

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

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

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

使用上面的代码，虽然 50 x 50 元素确实占用了空间（使用检查器看到），但没有显示图像。

被测试的 URL 工作正常，图像在硬编码时显示在应用程序中：

source={{ uri: 'test URL here' }}

我还习惯于在调用之前console.log检查该image道具是否存在return。一切都表明 URL（即imageprop）已经存在于数据库调用中。

附带说明一下，我最初使用的是 react-native 的ListItem组件，并将imageprop 作为其avatar属性传递给它；同样的问题发生在图像不显示的地方，只是一个灰色的框。这也可以通过设置以下内容来解决：

avatar={'test URL here'}

Answer 1

我们100%确定image是一个字符串吗？由于它在对 url 进行硬编码时起作用，因此imageprop 可能并不是严格意义上的字符串