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在return调用之前检查image道具是否存在。 一切都表明 URL（即image道具）已经存在于数据库调用中。

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

avatar={'test URL here'}

Answer 1

当你在'react-native-ios'下标记你的问题时，我想你是在iOS中追踪你的代码。 在这种情况下，如果您的网址是“http”网址，则必须检查以下链接：

启用App Transport Security

Answer 2

我们是否 100% 确定image是字符串？ 由于它在对 url 进行硬编码时有效，因此image属性可能不是严格的字符串

Answer 3

事实证明，从数据库传入的url确实有prop-type string但没有评估为等同于同一URL的手动声明的变量。 在数据库值上调用eval(url)可修复此问题。 如果有人对以下代码的原因有所了解：

导致以下控制台输出：

不胜感激！

Answer 4

你可以试试这个

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;