zoukankan      html  css  js  c++  java
  • [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

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

  • 相关阅读:
    3-百度网盘视频在线倍速播放
    16-算法训练 数字三角形
    【2018ACM/ICPC网络赛】徐州赛区
    【python】collections的使用
    【python】遇到的错误
    【2018ACM/ICPC网络赛】沈阳赛区
    【csp】2018-3
    【python】快速排序
    【csp】2017-12
    【校OJ】选网线
  • 原文地址:https://www.cnblogs.com/wukong1688/p/10983879.html
Copyright © 2011-2022 走看看