[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.调用 高德地图 接口,解析位置数据 ...
随机推荐
- ng 引入query
ng 引入jquery 1.在项目中 npm install --save jquery 在对应组件中加入 import * as $ from "jquery"; 在angu ...
- spring的15个经典面试题
总结Spring框架的15个经典面试题. 什么是Spring框架? Spring是一种轻量级框架,旨在提高开发人员的开发效率以及系统的可维护性. 我们一般说的Spring框架就是Spring Fram ...
- Java自学-类和对象 访问修饰符
Java的四种访问修饰符 成员变量有四种修饰符 private 私有的 package/friendly/default 不写 protected 受保护的 public 公共的 比如public 表 ...
- AtCoder Grand Contest 014
AtCoder Grand Contest 014 A - Cookie Exchanges 有三个人,分别有\(A,B,C\)块饼干,每次每个人都会把自己的饼干分成相等的两份然后给其他两个人.当其中 ...
- Dozer JAVA的POJO 映射工具
Dozerhttp://www.manongjc.com/article/50949.html JAVA的映射工具 BeanUtils dozer的使用方法https://blog.csdn.net/ ...
- Blend 硬货 绑定
原文:Blend 硬货 绑定 开始讲一点 硬技能 怎么用Blend实现绑定 效果 详细说一下绑定 1)default 2)OneTime 3) One Way 4)TwoWay 5) OneWayto ...
- C#将运算字符串直接转换成表达式且计算结果
DataTable dt = new DataTable(); var Result= dt.Compute("1+2*3+2", "");//将运算字符串转换 ...
- 学习笔记之知识图谱 (Knowledge Graph)
Knowledge Graph - Wikipedia https://en.wikipedia.org/wiki/Knowledge_Graph The Knowledge Graph is a k ...
- Gin-Go学习笔记二:Gin-Web框架
Gin-Web框架 1> 首先声明,这个是我自己搭建的纯Gin-Web框架,其中有借鉴学习别的想法和代码.已上传到GitHub上.地址为: https://github.com/weiy ...
- testNG结果入库
一.使用IReporter接口 https://blog.csdn.net/oqqJohn1234567890/article/details/80900511 此文章中将结果数据打印成文本.