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 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
限制只能输入数字的实现代码
May 16 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
js实现点击生成随机div
Jan 16 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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
名片管理系统python版
2018/01/11 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
年会搞笑主持词串词
2014/03/24 职场文书
党支部换届选举方案
2014/05/08 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
送达通知书
2015/04/25 职场文书
经销商会议开幕词
2016/03/04 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python