[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
转载请著名出处!谢谢~~
[RN] React Native Image 实现placeholder占位图的更多相关文章
- [RN] React Native 幻灯片效果 Banner
[RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...
- [RN] React Native 实现 类似QQ 登陆页面
[RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...
- [RN] React Native 实现图片预览
[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
- [RN] React Native 常见基本问题归纳总结
[RN] React Native 常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...
- [RN] React Native 关闭所有黄色警告
[RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- [RN] React Native 常用命令行
[RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...
- [RN] React Native 使用 阿里 ant-design
React Native 使用 阿里 ant-design 实例效果如图: 一.安装 npm install antd-mobile-rn --save npm install babel-plugi ...
- [RN] React Native 获取地理位置
React Native 获取地理位置 实现原理: 1.用 navigator.geolocation.getCurrentPosition 获取到坐标信息 2.调用 高德地图 接口,解析位置数据 ...
随机推荐
- FZU 1759 题解 欧拉降幂
本题考点:欧拉降幂 Super A^B mod C Given A,B,C, You should quickly calculate the result of A^B mod C. (1<= ...
- [转] Performance_js中计算网站性能监控利器
1.Performance方法 Performance提供的方法可以灵活使用,获取到页面加载等标记的耗时情况. performance.now() //返回当前到页面打开时刻的耗时,精确到千分之一毫秒 ...
- SQL IN 一定走索引吗?
摘要 IN 一定走索引吗?那当然了,不走索引还能全部扫描吗?好像之前有看到过什么Exist,IN走不走索引的讨论.但是好像看的太久了,又忘记了.哈哈,如果你也忘记了MySQL中IN是如何查询的,就来复 ...
- 【C#常用方法】2.DataTable(或DataSet)与Excel文件之间的导出与导入(使用NPOI)
DataTable与Excel之间的互导 1.项目添加NPOI的引用 NPOI项目简介: NPOI是一个开源的C#读写Excel.WORD等微软OLE2组件文档的项目,特点是可以在没有安装Office ...
- 我为什么学习Haskell
说起来,Haskell真是相当冷门而小众的一门语言.在我工作第一年的时候,我平时从网络的一些学习资料上时不时看到有人提到这门语言.那时候的认识就是除了我们平时用的“面向对象语言 (OOP: Objec ...
- 操作系统与进程.md
目录 1. 操作系统 1.1 作用 1.2 操作系统的发展 2. 进程的理论 2.1 相关名词 2.2 进程的创建 2.3 进程的状态: 1. 操作系统 管理.控制.协调计算机硬件与软件资源的计算 ...
- Java中关于位运算的面试题
位运算的效率是最高的,因为位位运算是直接对二进制进行操作 位运算只能应用于整型和char类型(char类型可以看做是特殊的无符号的整形) 面试题: a: 判断一个数是否是奇数 a & 1 == ...
- DjangoDRF之视图总结
思维导图xmind文件:https://files-cdn.cnblogs.com/files/benjieming/DRF%E6%A8%A1%E5%9D%97%E4%B9%8B%E8%A7%86%E ...
- EntityFramework 基类重写
/* * ------------------------------------------------------------------------------ * * 创 建 者:F_Gang ...
- Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...