android - 在 uri 的失败响应上加载缩略图 - React Native

Question

我需要根据数组长度在循环中渲染图像标签，我的图片标签看起来与此类似

<Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react/img/logo_og1.png'}}
//if image fails to load from the uri then load from'./img/favicon.png'
          onError={(error) => {console.log('loadinf',error)}}
        />

如果从 Uri 获取时发生错误，即 404 错误重试一段时间或显示默认本地镜像。如何在 React Native 中做到这一点？

Answer 1

您使用 defaultSource 属性在真实图像的位置放置了加载图像，但目前它仅适用于 iOS。我们可以实现您写的另一件事，它应该显示本地镜像，以防无法通过以下方法从 Internet 加载图像。

1. 将原始图像 URI 存储在状态中。
2. 在图像的 source 中使用此 URI。
3. 当调用 onError 函数时，将此状态变量更改为您的本地镜像。

例子:

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

export default class Demo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      image: {
        uri: 'something demo'
      }
    }
  }

  render() {
    return <View>
        <Image
            source={ this.state.image }
            onError={(a) => {
                this.setState({
                    image: require('image.png')
                });
            }}
            style={{ height: 100, width: 100 }}
        />
    </View>
  }
} 

重试图像的肮脏 hack 是这样的:

let counter = 0;
export default class reactNativePange extends Component {
    constructor(props) {
        super(props);

        this.state = {
            image: {
                uri: 'something demo'
            },
            failed: false
        }
    }

    render() {
        return (
            <View style={styles.container}>
              <Image
                  source={ this.state.failed ? require('./image.png') : { uri: 'something demo' } }
                  onError={(a) => {
                      if(counter >= 3) {
                          this.setState({
                              failed: true
                          });
                      } else {
                          counter++;
                          this.setState({
                              failed: true
                          });
                          setTimeout(() => {
                              this.setState({
                                  failed: false
                              });
                          }, 1)
                      }
                  }}
                  style={{ height: 100, width: 100 }}
              />
            </View>
        );
    }
}

As I mentioned that this is a dirty hack as the image might flicker during the retry.