专栏首页React Native开发圈React Native 图片查看组件

React Native 图片查看组件

本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

新的一年,新的开始,祝大家旺旺年旺旺旺!

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

效果图

安装方法

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>
    );
  }
}

主要参数说明

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

完整示例

完整代码:https://github.com/forrest23/ReactNativeComponents本次示例代码在 Component06文件夹中。请不要吝啬你们的Star

组件地址

https://github.com/ascoders/react-native-image-viewer

本文分享自微信公众号 - ReactNative开发圈(ReactNative-Circle),作者:forrest23

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-02-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React Native获取设备信息组件

    npm install--save react-native-device-info

    forrest23
  • React Native图片选择裁剪组件

    因为需要操作相册和相机,IOS需要增加隐私访问说明,修改info.plist文件增加以下项:

    forrest23
  • React Native二维码生成组件

    value:二维码的值 size:大小,默认128 bgColor:背景色,默认#000 fgColor:前景是,默认#fff

    forrest23
  • PHP程序员如何优雅的搬砖

    在这里向各位工程师提前拜年 “新年快乐” , 距离年三十已经没有几天了,可能有些朋友还坚持在一线战斗着,有些已经回到家乡陪伴家人。北京每到这个时候都似一座空城,...

    CrazyCodes
  • 二进制情报推送记录

    [1] r3kapig HITCON CTF 2019 Writeup https://r3kapig.com/writeup/20191018-hitcon...

    0x222进制
  • 比原链(Bytom)先知节点 Windows接入文档

    我们建议选择知名的VPS服务商,运行比原链节点对算力没有要求,但是请配置尽可能大的磁盘空间。

    比原链Bytom
  • 下暴雨出不了门?这有27部优秀的黑客纪录片

    大数据文摘
  • 【投稿】实战 | 6个步骤巧用知觉图 快速高效解析品牌定位

    本文为HCR-慧思拓电商数据研究总监张淳投稿,如需转载请注明作者与来源。 传统研究时代,知觉图(perceptual map)是一个简洁直观解析品牌定位的经典工...

    CDA数据分析师
  • 注册https://github.com/账号

    markgitisc 密码:见duhb文件 邮箱iscp9158_work@163.com,注册成功后,给出下图。

    马克java社区
  • ffmpeg 将视频转GIF

    本文使用的微信排版工具 https://github.com/lyricat/wechat-format

    苏生不惑

扫码关注云+社区

领取腾讯云代金券