如果 url 显示加载错误，如何重新加载图像 url 一次

Question

我正在尝试使用图像组件从平面列表中的 URL 加载图像。在这个组件中有一个属性 (onError?: () => void ) 这个属性在图像获取错误时被调用。当我运行我的应用程序在低网络中时，一些图像加载失败，所以我应该在 (onError?: () => void ) 中编写什么代码，以便加载图像失败的 URL 应该加载低网多一回。

我正在为 iOS

在 React Native 中创建此应用程序

我已经这样做了:

App.js

import React, { useState } from 'react';
import Product from './product';
import {
  FlatList,
  SafeAreaView
} from 'react-native';

const products = [
  {productImage: "https://media.istockphoto.com/photos/poverty-concept-used-red-shoes-for-children-in-a-thrift-shop-between-picture-id1303292803?s=612x612"},
  {productImage: 'https://media.istockphoto.com/photos/poverty-concept-used-red-shoes-for-children-in-a-thrift-shop-between-picture-id1303292803?s=612x612'},
  {productImage: "https://media.istockphoto.com/photos/poverty-concept-used-red-shoes-for-children-in-a-thrift-shop-between-picture-id1303292803?s=612x612"},
  {productImage: 'https://media.istockphoto.com/photos/poverty-concept-used-red-shoes-for-children-in-a-thrift-shop-between-picture-id1303292803?s=612x612'},
]

const App = () => {
  return (
    <SafeAreaView>
      <FlatList 
      numColumns={2}
      data={products}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => (<Product product={item} />)}>
</FlatList>
    </SafeAreaView>
  );
};

export default App;

product.js

import React from 'react';
import { View, Image } from 'react-native';

class Product extends React.Component {

    constructor(props){
     super(props);
     this.state = {
       uri : this.props.product.productImage,
       errorCount : 0
     }
    }

    passInError(e) {
      const { productImage } = this.props.product
          if (this.state.errorCount < 3) {
            this.setState({uri: productImage, errorCount: ++this.state.errorCount})
            console.log(" Corrupt Image URL : " + productImage )
            console.log(" Corrupt Image Error Reason : ", JSON.stringify(e) )
            console.log (" Corrupt Image Reload Count : ", this.state.errorCount)
          }
        }

    render() {
        return (
            <View>
              <Image
                 style={{ width: 200, height: 200, borderWidth: 2, }}
                 source={{ uri:this.state.uri }}
                 onError = {e => this.passInError(e.nativeEvent) }
                 key = {this.state.errorCount}
              />
            </View>
        )
    }
}

export default Product;

我应该在 (onError?: () => void ) 函数中编写什么代码来重新加载失败的图像 URL ?

Answer 1

尝试将图像 url 设置为状态并在加载图像出错时更新。

product.js

import React from 'react';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';

class Product extends React.Component {
    constructor(props){
     super(props);
     this.state = {
       uri : this.props.product.productImage,
       errorCount : 0
     }
    }

    render() {
        const { productImage } = this.props.product
        return (
            <View>
              <FastImage
                 style={{ width: 200, height: 200, borderWidth: 2, }}
                 source={{ uri:this.state.uri }}
                 resizeMode={FastImage.resizeMode.contain}
                 onError={e =>
                   this.state.errorCount < 3 &&
                   this.setState(
                     {uri: '', errorCount: ++this.state.errorCount},
                       () => this.setState({uri: productImage}),
                   )
                 }
              />
            </View>
        )
    }
}

export default Product;

Answer 2

如果我没理解错的话，你想在第一次尝试出错时第二次尝试加载同一张图片。我会尝试 re-render 错误组件（更好的是，用包装器组件包装图像组件，这样整个产品组件就不会 re-rendered）：

const Product = () => {
  const [fetchCounter, setFetchCounter] = useState(0);

  return (
    <img 
      src={'imageUrl'}
      onError={() => {
        if (fetchCounter < 1) {
          setFetchCounter(fetchCounter++);
        }
      }} 
    />
  )
}

我不知道你的用例，但你可以加载后备图像。它可能看起来像这样：

const Product = () => {
  const [imageUrl, setImageUrl] = useState('product-img-url');

  return (
    <img 
      src={imageUrl}
      onError={() => setImageUrl('fallback-img-url')} 
    />
  )
}

如果 url 显示加载错误，如何重新加载图像 url 一次

How to reload image url one more time if url shows error in loading

ios

reactjs

react-native

image

react-native-fast-image