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 15 Javascript
javascript天然的迭代器
Oct 29 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 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
3
2006/10/09 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
python实现dict版图遍历示例
2014/02/19 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
暑期实践思想汇报
2014/01/06 职场文书
上班玩手机检讨书
2014/02/17 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
建筑安全责任书范本
2014/07/24 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
拾金不昧表扬信
2015/01/16 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书