gpt4 book ai didi

react-native - 加载图像时显示默认元素

转载 作者:行者123 更新时间:2023-12-03 12:46:54 26 4
gpt4 key购买 nike

我有一个代表用户头像的组件,它从我的 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 原则和我的要求的解决方案(在显示图像之前没有幽灵组件来加载图像)。

最佳答案

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元素并等待它加载。然后你用 react 渲染图像。浏览器很聪明,这次从缓存中获取它。即时渲染!

http://jsfiddle.net/4hq3y4ra/3/用于演示。

关于react-native - 加载图像时显示默认元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35161969/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com