React Native 图片查看组件的方法


Posted in Javascript onMarch 01, 2018

React Native 图片查看组件:react-native-image-viewer,纯JS组件,小巧快速的图标查看组件。支持图片放大缩小,支持图片加载失败设置替代图片,支持将图片保存到本地等功能。

效果图

React Native 图片查看组件的方法

安装方法

npm i react-native-image-zoom-viewer --save

使用示例

const images = [
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
];

export default class Component06 extends Component {
 constructor(props) {
  super(props);
 }

 render() {
  return (
   <View style={{ flex: 1 }}>
    <ImageViewer
     imageUrls={images}
     failImageSource={{
      url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').width,
     }}
    />
   </View>
  );
 }
}

主要参数说明

  1. imageUrls 图片url地址的数组
  2. enableImageZoom 是否允许缩放
  3. failImageSource 加载失败时显示的图片
  4. loadingRender 加载loading
  5. renderHeader 头部样式
  6. renderFooter 底部样式
  7. renderIndicator 页码指示器样式

完整示例

完整代码:https://github.com/forrest23/ReactNativeComponents 本次示例代码在 Component06文件夹中。

组件地址:https://github.com/ascoders/react-native-image-viewer

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
jQuery 表格插件整理
Apr 27 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
深入学习JavaScript对象
Oct 13 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 #Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 #Javascript
vue中使用cropperjs的方法
Mar 01 #Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 #Javascript
Vuex中mutations与actions的区别详解
Mar 01 #Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 #Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 #Javascript
You might like
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
采购部主管岗位职责
2014/01/01 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
离职报告范文
2014/11/04 职场文书
酒店辞职书范文
2015/02/26 职场文书
公积金贷款承诺书
2015/04/30 职场文书
专项资金申请报告
2015/05/15 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书