[RN] React Native Image 實現placeholder占位圖

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

轉載請著名出處！謝謝~~