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错误重试某段时间或显示默认本地图像。如何做好本地反应？

Answer 1

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

将原始图像URI存储在状态。
在图片的source中使用此状态的URI。
调用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>
  }
}

重试图像的肮脏黑客将是这样的：

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>
        );
    }
}

正如我所提到的，这是一个肮脏的黑客，因为在重试期间图像可能会闪烁。

在uri的故障响应中加载缩略图 - React Native

1 个答案: