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占位图的更多相关文章

  1. [RN] React Native 幻灯片效果 Banner

    [RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...

  2. [RN] React Native 实现 类似QQ 登陆页面

    [RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...

  3. [RN] React Native 实现图片预览

    [RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...

  4. [RN] React Native 常见基本问题归纳总结

    [RN] React Native  常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...

  5. [RN] React Native 关闭所有黄色警告

    [RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...

  6. [RN] React Native 下实现底部标签(支持滑动切换)

    上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...

  7. [RN] React Native 常用命令行

    [RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...

  8. [RN] React Native 使用 阿里 ant-design

    React Native 使用 阿里 ant-design 实例效果如图: 一.安装 npm install antd-mobile-rn --save npm install babel-plugi ...

  9. [RN] React Native 获取地理位置

    React Native 获取地理位置 实现原理: 1.用  navigator.geolocation.getCurrentPosition 获取到坐标信息 2.调用 高德地图 接口,解析位置数据 ...

随机推荐

  1. ng 引入query

    ng 引入jquery 1.在项目中 npm install --save jquery 在对应组件中加入 import * as $ from "jquery";   在angu ...

  2. spring的15个经典面试题

    总结Spring框架的15个经典面试题. 什么是Spring框架? Spring是一种轻量级框架,旨在提高开发人员的开发效率以及系统的可维护性. 我们一般说的Spring框架就是Spring Fram ...

  3. Java自学-类和对象 访问修饰符

    Java的四种访问修饰符 成员变量有四种修饰符 private 私有的 package/friendly/default 不写 protected 受保护的 public 公共的 比如public 表 ...

  4. AtCoder Grand Contest 014

    AtCoder Grand Contest 014 A - Cookie Exchanges 有三个人,分别有\(A,B,C\)块饼干,每次每个人都会把自己的饼干分成相等的两份然后给其他两个人.当其中 ...

  5. Dozer JAVA的POJO 映射工具

    Dozerhttp://www.manongjc.com/article/50949.html JAVA的映射工具 BeanUtils dozer的使用方法https://blog.csdn.net/ ...

  6. Blend 硬货 绑定

    原文:Blend 硬货 绑定 开始讲一点 硬技能 怎么用Blend实现绑定 效果 详细说一下绑定 1)default 2)OneTime 3) One Way 4)TwoWay 5) OneWayto ...

  7. C#将运算字符串直接转换成表达式且计算结果

    DataTable dt = new DataTable(); var Result= dt.Compute("1+2*3+2", "");//将运算字符串转换 ...

  8. 学习笔记之知识图谱 (Knowledge Graph)

    Knowledge Graph - Wikipedia https://en.wikipedia.org/wiki/Knowledge_Graph The Knowledge Graph is a k ...

  9. Gin-Go学习笔记二:Gin-Web框架

    Gin-Web框架 1>     首先声明,这个是我自己搭建的纯Gin-Web框架,其中有借鉴学习别的想法和代码.已上传到GitHub上.地址为: https://github.com/weiy ...

  10. testNG结果入库

    一.使用IReporter接口 https://blog.csdn.net/oqqJohn1234567890/article/details/80900511  此文章中将结果数据打印成文本.