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 秒以上かかります。なぜそうなのですか?私が使用している画像サイズは 1 MB 未満で、2.3 秒でアップロードできます。