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 中{},[]中括号,大括号使用详解
May 12 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
vue实现购物车案例
May 30 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
文本加密解密
2006/06/23 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
jquery选择器使用详解
2014/04/08 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Python中使用中文的方法
2011/02/19 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python入门必须知道的11个知识点
2018/03/21 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
django使用多个数据库的方法实例
2021/03/04 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
娱乐节目策划方案
2014/06/10 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
焦点访谈观后感
2015/06/11 职场文书
《藏戏》教学反思
2016/02/23 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书