Question

我正在尝试在我的React Native应用中显示一些图像。这是一个简单的应用程序，仅适用于Android。该应用程序从API获取信息。初始视图是项目列表，当我单击一个项目时，它会从API获取更多信息并显示在新页面中。我还得到一些指向存储在AWS的S3存储桶中的图像的URL。

这是我显示图像的方式：

<ScrollView>
    {this.state.urls.map(url => {
        <Image 
            source={{uri: url}} 
            style={{width:400, height:200}}
        />
    }
</ScrollView>

问题在于它没有显示那些图像。我可以看到页面的一部分用于图像。我可以看到这是因为，如果将图像放在第一位，然后再输入一些文本，则该文本将出现在页面底部。我不知道怎么回事，该图像没有出现。

我搜索了一个答案，发现了一些有关使用https而不是http的信息（至少对于iOS）。发现我需要设置宽度和高度。我已经做了这些事情和其他事情，但是没有用。

我还尝试仅从互联网上选择一个图像并将其直接放在uri中，但它仍然无法正常工作。

Answer 1

您在地图函数中缺少return语句。

<ScrollView>
    {this.state.urls.map(url => {
       return <Image 
            source={{uri: url}} 
            style={{width:400, height:200}}
        />
    }
</ScrollView>

更新

我刚刚尝试了您在上面的注释中提供的网址，但无法在我的设备上使用。我尝试了来自互联网this one的其他图像，但它可以工作。可能还有某些原因阻止您从移动应用程序内访问图像。

为了进一步调试，我尝试使用单个<Image .../>并将图像托管在AWS上，看看是否可以显示该图像。您可能需要更改一些AWS配置，以允许从移动设备访问映像。

Answer 2

假设您可以在应用程序中访问图像URL。以下代码将显示您的图像。实际上，您忘记了从必须拥有的map返回组件。

<ScrollView>
   {this.state.urls.map(url => {
       return <Image 
                source={{uri: url}} 
                style={{width:400, height:200}} /> }
   }
</ScrollView>

为什么我的图像未在React Native中显示

2 个答案: