react-native – 加载Image时显示默认元素

发布时间：2020-12-15 20:41:32 所属栏目：百科来源：网络整理

导读：我有一个代表用户头像的组件,它从我的API加载图像. 我希望它在加载头像时显示默认头像(不是另一个图像). constructor() { super(); this.state = { loaded: false,};}render() { if (!this.props.uri || !this.state.loaded) { return ( DefaultAvatar / );

我有一个代表用户头像的组件,它从我的API加载图像.
我希望它在加载头像时显示默认头像(不是另一个图像).

constructor() {
  super();
  this.state = {
    loaded: false,};
}

render() {
  if (!this.props.uri || !this.state.loaded) {
    return (
      <DefaultAvatar />
    );
  }
  return <Image onLoad={this.onLoad.bind(this)} uri={this.props.uri} />;
}

onLoad() {
  this.setState({loaded: true});
}

我遇到的问题是,使用当前代码,Image将永远不会被渲染,因此状态永远不会改变.我无法找到满足React原则和我的要求的解决方案(在显示图像之前没有加载图像的ghost组件).

class LazyImage extends React.Component{
  constructor () {
    super(this.props)
    this.state = {loaded: false}
  }

  handleLoad () {
    this.setState({loaded:true})
  }

  componentDidMount () {
    this.img = new Image()
    this.img.onload = this.handleLoad.bind(this)
    this.img.src = this.props.src
  } 

  render () {
    return this.state.loaded?<img src={this.props.src}/>:<div>Loading...</div>
  }
}

您创建一个本机Image元素并等待它加载.然后用反应渲染图像.浏览器是智能的,这次从缓存中取出它.即时渲染！

有关演示,请参见http://jsfiddle.net/4hq3y4ra/3/.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!