URI更改后的图像组件延迟加载

时间:2017-11-06 06:58:10

标签: reactjs react-native react-native-ios react-native-image

 class PureImage extends React.Component {
    constructor(props){
    super(props);
    this.time = null;
  }
  shouldComponentUpdate(nextProps,nextState){
    if(nextProps.source.uri === this.props.source.uri){
      return false;
    }else{
      return true;
    }
  }
  render(){
    console.log('renderin Pure Image');
    return (
      <Image
        defaultSource={Images.defaultUser}
        style={ProfileStyle.profileImage}
        onLoadStart= {()=> {this.time = new Date(); console.log('image load start at ', this.time);} }
        onLoadEnd = { ()=> {console.log('image load ended at ',new Date()); console.log('time taken=', (new Date().getTime()-this.time.getTime())/1000, ' secs');  } }
        onLoad={()=>console.log('image loaded')}
        onProgress={(e)=> {let progress = Math.round(100*e.nativeEvent.loaded / e.nativeEvent.total); console.log('progress started at',new Date());console.log('progress=',progress)} }
        source={this.props.source} 
      />
    );
  }
}

我为Image组件制作了一个纯组件包装器。上传图像后,会更改this.props.source.uri属性,应该更新图像。但它需要大约1分钟才能完成。我已经使用onLoadStart,onLoadEnd和onProgress方法来查看正在发生的事情。 onLoadStart()会立即触发,但onProgress需要40多秒才能开始显示任何进度。为什么会这样?我使用的图像尺寸小于&lt; 1mb并在2,3秒内上传。

0 个答案:

没有答案