react-native Image 实现placeholder占位图

react-native Image没有placeholder这样的props，但是业务有需要这种场景，网上找了几种方法：

包裹Image，但是该方法在新版本已无法使用
使用ImageBackground包裹Image，如果图片有透明度，背景图和网络加载的图片就叠加在一起了

所以可以自定义一个组件实现网络加载图片失败后的占位图：

import React from 'react';
import {Image} from 'react-native';
import PropTypes from 'prop-types';class ImageView extends React.PureComponent {static propTypes = {source: PropTypes.object,style: Image.propTypes.style,placeholderSource: PropTypes.number.isRequired,};state: {source: {},loading: boolean};constructor(props) {super(props);this.state = {source: this.props.source,loading: true,};}render() {return (<Image source={this.state.source} style={this.props.style} onLoad={() => {this.setState({loading: false})}} onLoadEnd={() => {if (this.state.loading === true) {this.setState({source: this.props.placeholderSource})}}}/>);}}export default ImageView;

如果希望Image在未加载网络图片时就有占位图可以用两个Image实现:

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;

使用时设置placeHolderSource为占位图资源即可。
<ImageView style={styles.icon} source={{uri: imageUrl}} placeholderSource={require("./img/icon.png")}/>

END
有更好的想法欢迎留言交流~~

react-native Image 实现placeholder占位图相关推荐

android显示多个网络图片,Android加载网络图片并显示占位图
我们使用glide来实现ImageView加载网络图片的功能,首先引入依赖包 implementation "com.github.bumptech.glide:glide:3.7.0&qu ...
html怎么帮图片占位,html占位图img placeholder
html image placeholder while loading update 2013 11.21 还有两个问题,解决的不是很好. 1.加载的速度太慢,有时候,没看到它加载,通过网络获取的图 ...
React Native开发总结（一）
一.RN优劣势 React Native的设计理念: 既拥有Native的用户体验.又保留React的开发效率优势: 它对比原生开发更为灵活,对比H5体验更为高效. 替代传统的WebView,打开效 ...
React Native 二常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
H5、React Native、Native应用对比分析
@王利华,vczero "存在即合理".凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候, ...
初步了解React Native的新组件库firstBorn
first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...
React Native基础入门教程：初步使用Flexbox布局
一.长度的单位在开始任何布局之前,让我们来首先需要知道,在写React Native组件样式时,长度的不带单位的,它表示"与设备像素密度无关的逻辑像素点". 这个怎么理解呢? 我 ...
【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框获取组件实例常用的两种方式...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html ...
React Native - FlexBox弹性盒模型
FlexBox布局 1. 什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫FlexBox,意为"弹性布局",旨在通过弹性的方式来对 ...

react-native Image 实现placeholder占位图

react-native Image 实现placeholder占位图

react-native Image 实现placeholder占位图相关推荐

最新文章

热门文章