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 相关文章推荐
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
js跳转页面方法总结
Jan 29 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
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
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
CI框架常用函数封装实例
2016/11/21 PHP
基于jquery的$.ajax async使用
2011/10/19 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
jquery处理json对象
2014/11/03 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
初步探究Python程序的执行原理
2015/04/11 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
python环境下安装opencv库的方法
2020/03/05 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
中科软笔试题和面试题
2014/10/07 面试题
物流业务员岗位职责
2014/02/08 职场文书
小学亲子活动总结
2014/07/01 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
旷工检讨书1000字
2015/01/01 职场文书
皇城相府导游词
2015/02/06 职场文书
员工辞职信范文
2015/03/02 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
pandas进行数据输入和输出的方法详解
2022/03/23 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python