问题

在我的React Native应用中，使用AWS Amplify，我使用S3图像来显示来自我的S3存储桶的图像。我想知道如何在我的S3图像加载完成之前显示动画（一个GIF），然后在图像加载完成后显示图像？

<S3Image imgKey={info.Imageurl} style={styles.image}/>

<S3Image imgKey={info.Imageurl} style={styles.image}/>

答案1

得分: 0

以下是翻译好的部分：

"The documentation has a handleOnLoad attribute that's called when the image loads."

中文翻译："文档中有一个handleOnLoad属性，当图像加载时会调用它。"

"This should work:

<S3Image imgKey={info.Imageurl} style={styles.image} handleOnLoad={() => {console.log('da-ta!')}}/>"

中文翻译："这应该可以工作：

<S3Image imgKey={info.Imageurl} style={styles.image} handleOnLoad={() => {console.log('da-ta!')}}/>"

"Note, it appears that you will need to render the S3Image tag to start the image loading. I don't know what it's appearance is while the image is loading, but if you want to show/hide it you should do that via the style attribute and not by including or excluding the component from render with conditional logic like {isImageLoaded && <S3Image.../>}."

中文翻译："请注意，似乎您需要渲染S3Image标签以启动图像加载。我不知道在图像加载时它的外观是什么样的，但如果您想要显示/隐藏它，应该通过样式属性来实现，而不是通过在渲染过程中使用条件逻辑来包括或排除组件，比如{isImageLoaded && <S3Image.../>}。"

"EDIT
The above is wrong, per @sama that attribute is not available for React Native. You could get a link to the image and then include that in an <img src={imageUrl}> tag. Probably make your own component that takes a component to display as the loading state and the key of the object in S3."

中文翻译："编辑
上述内容是错误的，根据@sama的说法，该属性在React Native中不可用。您可以获取图像的链接，然后将其包含在<img src={imageUrl}>标签中。可能需要创建自己的组件，该组件接受用于显示加载状态的组件以及S3对象的key。"

"The default config for Storage.get has download = false so you'll get a signed-url that points the image object in the S3 bucket. Your component can show the loading image while it awaits the real image's URL, then plug that into an image tag. You'll still need to wait on the image tag to actually fetch the image, so keep it hidden until you get the image's onload event, then set the image to visible and hide your spinner."

中文翻译："Storage.get的默认配置为download = false，因此您将获得一个指向S3存储桶中的图像对象的签名URL。您的组件可以在等待实际图像的URL时显示加载图像，然后将其插入到图像标签中。您仍然需要等待图像标签实际获取图像，因此在获取图像的加载事件之前将其隐藏，然后将图像设置为可见并隐藏加载指示器。"

"const signedURL = await Storage.get(key)"

中文翻译："const signedURL = await Storage.get(key)"

<S3Image imgKey={info.Imageurl} style={styles.image} handleOnLoad={()=>{console.log('da-ta!'}}/>