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. FZU 1759 题解 欧拉降幂

    本题考点:欧拉降幂 Super A^B mod C Given A,B,C, You should quickly calculate the result of A^B mod C. (1<= ...

  2. [转] Performance_js中计算网站性能监控利器

    1.Performance方法 Performance提供的方法可以灵活使用,获取到页面加载等标记的耗时情况. performance.now() //返回当前到页面打开时刻的耗时,精确到千分之一毫秒 ...

  3. SQL IN 一定走索引吗?

    摘要 IN 一定走索引吗?那当然了,不走索引还能全部扫描吗?好像之前有看到过什么Exist,IN走不走索引的讨论.但是好像看的太久了,又忘记了.哈哈,如果你也忘记了MySQL中IN是如何查询的,就来复 ...

  4. 【C#常用方法】2.DataTable(或DataSet)与Excel文件之间的导出与导入(使用NPOI)

    DataTable与Excel之间的互导 1.项目添加NPOI的引用 NPOI项目简介: NPOI是一个开源的C#读写Excel.WORD等微软OLE2组件文档的项目,特点是可以在没有安装Office ...

  5. 我为什么学习Haskell

    说起来,Haskell真是相当冷门而小众的一门语言.在我工作第一年的时候,我平时从网络的一些学习资料上时不时看到有人提到这门语言.那时候的认识就是除了我们平时用的“面向对象语言 (OOP: Objec ...

  6. 操作系统与进程.md

    目录 1. 操作系统 1.1 作用 1.2 操作系统的发展 2. 进程的理论 2.1 相关名词 2.2 进程的创建 2.3 进程的状态: 1. 操作系统 ​ 管理.控制.协调计算机硬件与软件资源的计算 ...

  7. Java中关于位运算的面试题

    位运算的效率是最高的,因为位位运算是直接对二进制进行操作 位运算只能应用于整型和char类型(char类型可以看做是特殊的无符号的整形) 面试题: a: 判断一个数是否是奇数 a & 1 == ...

  8. DjangoDRF之视图总结

    思维导图xmind文件:https://files-cdn.cnblogs.com/files/benjieming/DRF%E6%A8%A1%E5%9D%97%E4%B9%8B%E8%A7%86%E ...

  9. EntityFramework 基类重写

    /* * ------------------------------------------------------------------------------ * * 创 建 者:F_Gang ...

  10. Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer

    问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...