[RN] React Native Image 实现placeholder占位图

react

React Native Image 实现placeholder占位图

react-native Image没有placeholder这样的props,但是业务有需要这种场景, 解决方法为:

  • 使用ImageBackground包裹Image,如果图片有透明度,背景图和网络加载的图片就叠加在一起了

 组件类ImageView.js

import React from 'react';
import {Image, StyleSheet, View, ViewPropTypes} from 'react-native';
import PropTypes from 'prop-types';

class ImageView extends React.PureComponent {
static propTypes = {
source: PropTypes.object,
style: ViewPropTypes.style,
placeholderSource: PropTypes.number.isRequired,
};
state: {
loading: boolean;
};

constructor(props) {
super(props);
this.state = {loading: true,};
}

render() {
return (<View style={this.props.style}>
<Image style={[this.props.style, styles.imageStyle]} source={this.props.source} onLoad={() => this.setState({loading: false})}/>
{this.state.loading ?
<Image style={[this.props.style, styles.imageStyle]} source={this.props.placeholderSource}/> : null}
</View>
);
}

}

const styles = StyleSheet.create({
imageStyle: {
position: 'absolute',
top: 0,
right: 0,
left: 0,
bottom: 0
}
});

export default ImageView;

二、使用

<ImageView style={styles.icon} source={{uri: imageUrl}} placeholderSource={require("./img/icon.png")}/>

本博客地址: wukong1688

本文原文地址:https://www.cnblogs.com/wukong1688/p/10983879.html

转载请著名出处!谢谢~~

以上是 [RN] React Native Image 实现placeholder占位图 的全部内容, 来源链接: utcz.com/z/382226.html

回到顶部