基于React Native官方组件Image封装的具备加载生命周期视觉反馈的组件react-native-loading-image

最新推荐文章于 2022-04-13 09:14:35 发布
最新推荐文章于 2022-04-13 09:14:35 发布
阅读量685 收藏
点赞数
分类专栏： React Native 文章标签： LoadImage react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28978893/article/details/82790539
版权
本文介绍了一个基于React Native的`Image`组件封装，名为`react-native-loading-image`，它提供了网络图片加载期间的视觉反馈，包括闪烁动画和loading.gif显示。在图片Pending和Error状态下也有定制渲染，并且支持所有官方组件属性。详细内容包括安装、引入项目以及使用示例。
摘要由CSDN通过智能技术生成

react-native-loading-image

基于React Native官方组件Image封装的具备加载生命周期视觉反馈的组件,具体实现功能如下：

  • 网络图片Pending状态渲染，提供闪烁动画、loading.gif两种方式
  • 网络图片Error状态渲染
  • 继承官方Image组件的所有属性

Installation

npm install react-native-loading-image --save

Import into your project

import LoadImage from 'react-native-loading-image';

Examle useage

<
最低0.47元/天 解锁文章
孟凡涛
关注
专栏目录
React Native学习资源汇总
xiangzhihong8的专栏
08-01 2289
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
react
最新发布
Jasmin博客
05-27 1132
面试
React-Native 之 图片加载 Image
JeffreyGaofei的博客
06-14 2006
最近初探React-Native，开始写一点自己的心得，今天第一天，跟大家介绍一个最最最简单的小控件。那就是React-Native中最常用的，图片加载控件 &lt;image&gt;&lt;image&gt;，没错，这货在android 里我门叫他 ImageView用法非常简单。好，身为程序猿。废话少说，贴代码：一行代码，搞定android，ios双端本地图片加载。本地图片的加载&lt;Ima...
rn react-native-image-lazy-loading
unbreakablec的博客
11-22 743
importReactfrom'react'; import{Dimensions,InteractionManager,StyleSheet,Text,View,Image}from'react-native'; importImageLazyfrom'react-native-image-lazy-loading'; constscreenWidth=Dimensions.get('window').width; constscreenHeight=...
在React Native中进行渐进式图像加载
villa_mou的博客
05-15 425
​Internet连接速度是可变的，尤其是在使用移动设备时。作为开发人员，我们经常会忘记许多用户在功能较弱的设备上运行我们的应用程序，并且互联网连接速度比我们慢。走出深山，尝试访问您的应用程序并查看其性能。 应用程序中最昂贵的东西之一就是您正在加载的远程图像。它们将花费一些时间来加载，特别是如果它们是大图像。 今天，我们将构建一个组件，使我们能够： 传递完整尺寸的图像以显示（就像普通Image组件一样） 在加载全尺寸图片时传递缩略图以显示 在即将下载的图片的位置自动显示一个占位
移动跨平台框架ReactNative图片组件Image【10】
江咏之
04-13 4529
前端江太公 React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。 React Native系列导航 01-React Native 基础教程 02-安装ReactNative 03-.
React Native-10：活动指示器loading
臧小川的博客
11-11 426
import React, { useState, useEffect } from 'react' import { StyleSheet, Text, View, Button, ActivityIndicator // 活动指示器 loading } from 'react-native' const App = () => { const [animation, setAnimation] = useState(true) useEffect(() =&
React Native组件基础：学习创建和使用组件
React Native具有许多优秀的特性，如高效的渲染引擎、灵活的布局系统以及丰富的组件库。它能够有效地提高开发效率，并具备接近原生应用的性能和用户体验。 ## 1.2 React Native组件的重要性 在React Native中，...
React-native自定义组件之loading加载（通过API方式调用）
RN_David的博客
09-03 2107
React-native自定义组件之loading加载（通过API方式调用） 在请求接口数据中，需要等待时间，为了提高用户体验，加入一个正在加载的类似于模态框的提示 如上图所示可以再React Native 项目视图层上面创建一个视图层，来实现一些弹窗、加载组件，可以js调用。 先创建上层组件，新建js文件 import React, { Component } from "react"; import { StyleSheet, AppRegistry, View, Text } from 'reac
React Native开发封装Toast与加载Loading组件示例
12-08
在App开发中，我们避免不了使用的两个组件，一个Toast，一个网络加载Loading，在RN开发中，也是一样，React Native官方并没有提供者这两个常用组件，需要开发者自己根据需求来自定义。作者就在其他组件的基础上在进行二次封装，使用起来更加简单，更具扩展性，同学们只需将Toast与Loading文件拖到项目中，install对应的组件库即可 效果图   Toast和Loading Demo地址 https://github.com/guangqiang-liu/react-native-toastAndLoading Demo使用使用到的三方组件 react-native-ro
react-native-image-fit：用于RN的Image Viewer组件，类似于Facebook或LinkedIn
02-26
React本机图像拟合 RN的ImageViewer组件 安装 $ npm install --save react-native-image-fit 或者 $ yarn add react-native-image-fit 用法 import { ImageViewer } from 'react-native-image-fit' ; export const App = ( ) => ( < ImageViewer disabled = { false } // by default source = { require ( './photo.png' ) } // or { url: 'https://...' } doubleTapEnabled = { true } // by default double tap will zoom image
react-Reactimg组件实现在加载时模拟闪烁效果
08-15
一个功能强大，可自定义的<img>组件，可在加载时模拟闪烁效果。 （零依赖！）目前与React兼容，但RN兼容性也在路上。
React Native开发——Image组件
BlueBerry的专栏
06-02 1048
React Native开发——Image组件Image是一个用于显示多种不同类型的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。加载图片renderImages() { return ( <View> <Image style={styles.icon} source={require('./ico
React-Native网络请求加载界面
Kunsan_16的博客
07-25 5025
React-Native网络请求加载界面　　当一个界面在从网络获取数据时，由于网速因素，需要个等待界面，这时候我们必须展示个友好界面，就是加载界面。这个加载动画可以使用react-native-spinkit github地址：https://github.com/maxs15/react-native-spinkit 利用state来显示或隐藏界面 　　state一般用来改变组件的状态，假设我
React Native常用组件
qq_35911118的博客
05-06 491
本文收录了,React Native中常用的一些相关组件, 摘录的过程中,可能有所差错,不足之处还望指出. 希望大家可以互相学习,互帮互助! 第一部分 基于react-navigation组件的自定义 head 视图 react-native-carousel 轮播图 react-native-countdown 倒计时 react-native-device-info 设备信息 react-na...
React-Native中通用组件（Alert、Loading）
weixin_34210740的博客
08-18 432
移动端开发过程中Alert和Loading框是必不可少的组件，各个平台都有提供相应的API，当然UI样式、响应方式具有平台的差异，React-Native（iOS、Android）项目中使用一套代码，想要抹平平台差异就需要自己单独实现一套。 最近的项目中有做相关方面的工作，特意从项目中抽离相关代码逻辑，封装成独立组件，这里做一下简单的介绍。 react-native-overlayer react...
react-native image 有时显示不出来_在 React Native 中渐进式加载图像
weixin_39726971的博客
12-19 829
网速是可变的，尤其是当你使用移动设备时。作为开发人员，我们经常忘记，许多用户正在功能较差的设备上以很慢的网速运行我们的应用程序。到山里去，试着访问你的应用程序，看看它表现如何。应用程序中最耗费的东西之一就是要加载远程图像。 它们需要时间来加载，尤其是大图片。今天我们将构建一个组件，它允许我们: - 传递要显示的全尺寸图像(就像普通图像组件一样) - 在加载完整大小的图像时，传递一个缩略图以显示 -...
React-native Image的初识
zww学习笔记
01-22 1305
Image组件的常见属性： 属性方法onLoad(function）:当图片加载成功后，回调该方法 onLoadStart（function）:当图片开始加载的时候调用该方法 onLoadEnd(function）:当图片加载结束回调该方法，不会管图片加载成功还是失败 onLayout（function）:当 Image 布局发生变化会调用该方法 resizeMode:缩放比例，（包含可选参数’co
React-Native组件详解：View, Text, Touchable, TextInput, Image
本文主要介绍了React-Native中五个常见的组件：View、Text、Touchable类组件、TextInput和Image，包括它们的基本用法和示例代码。 React-Native是Facebook推出的一个框架，它允许开发者使用JavaScript来构建原生...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值