无法使用 Amplify Storage API 在 React Native 中显示来自 s3 的图像答案

【问题标题】：Can't show image from s3 in React Native using Amplify Storage API无法使用 Amplify Storage API 在 React Native 中显示来自 s3 的图像
【发布时间】：2019-02-04 07:17:02
【问题描述】：

我只是尝试使用 AWS Amplify 的存储显示来自 s3 存储桶的图像并做出本机反应。我的代码如下：

class App extends React.Component {

  state = { fileUrl: '' }

  componentDidMount() {
        Storage.get('vlad-tchompalov-450777-unsplash.jpg')
          .then(data => {
            console.log("data: ", data)
            this.setState({
              fileUrl: data
            })
          })
          .catch(err => {
            console.log("error fetching image", err)
          })
      }

  render() {
    return (
      <View style={styles.container}>
      { this.state.fileURL != '' && console.log('state: ', this.state.fileUrl) &&
        <Image source={{ uri: this.state.fileUrl }} style={{ width: 100, height: 100 }} />
      }
      </View>
    );
  }
}

从 console.log() 我确实得到了照片的正确 URL（如果我点击它，我可以看到照片）并且它有 https，所以这不应该是问题： console

我没有为 API 调用添加访问级别，所以它默认为“公共”，这是我需要的。

我检查了配置和权限，似乎没问题。

谢谢！

【问题讨论】：

也许这是一个愚蠢的建议，但是您是否尝试过不调用该 console.log('state...')？因为我不知道它是如何评估的。换句话说就是{ this.state.fileURL != '' && <Image ... /> }
Boolean(console.log('hello')) 是false
你能把你的代码添加到 jsfiddle 上吗？您是否将您的图片 URL 粘贴到浏览器中以知道该 URL 正确获取了图片？
@Milore 这就是问题所在！现在可以了！这很奇怪，因为我添加了 console.log，因为它不起作用，但后来我修复了一些配置并留下了 console.log。无论如何，谢谢！！
很高兴听到它有效 :)

标签： image react-native amazon-s3 aws-amplify

【解决方案1】：

console.log('state: ', this.state.fileUrl)

总是代表一个假值，所以

<Image source={{ uri: this.state.fileUrl }} style={{ width: 100, height: 100 }} />

永远不会被考虑并添加到渲染方法中。删除它将修复错误。简单来说：

{ this.state.fileURL != '' && <Image ... /> }

【讨论】：