专栏首页王磊的博客ReactNative实现图集功能

ReactNative实现图集功能

需求描述:

图片缩放、拖动、长按保存等基础图片查看的功能;

展示每张图片文本描述;

实现效果,如图:

实现步骤

使用第三方插件:react-native-image-zoom-viewer

插件GitHub地址:https://github.com/ascoders/react-native-image-viewer

开放参数说明:https://github.com/ascoders/react-native-image-viewer/blob/master/src/image-viewer.type.ts

实现思路:

  1.图集展示部分使用‘react-native-image-zoom-viewer’的ImageViewer控件完整实现;

  2.每张图片的说明使用ScrollView嵌套Text进行展现,ImageViewer开放自定义renderFooter方法,提供当前图片下标(currentIndex),这样就可以分别展示每张图片对于的文字了。

react-native-image-zoom-viewer的使用具体参见GitHub地址的步骤进行配置。

实现代码:

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Modal,
    ScrollView,
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';

const images = [{
    url: 'http://static.gangguwang.com/image/2017/8/29/16/24/59a524af10f4e8000900198c.jpg'
}, {
    url: 'http://static.gangguwang.com/image/2017/8/29/16/7/59a520d710f4e80009001950.jpg'
}];
let imgsDesc = [
    "主播上午有事不在公司,拍摄安排被调到了下午,小侯就提前在电脑面前到处浏览网站,找下一周视频的拍摄主题。视频一旦拍出来就要赶紧制作,刚制作完上传到网上又要开始下一期栏目的剧本构思,主题内容既要是当下热点又要能维持热度直到视频上传,还要考虑适合远近镜头的表现和镜头的切换等,所以小侯每周最头疼的事情就是拍摄主题。",
    "徐小明是陕西西安东岭旗下的业务员!"
];

class index extends Component {
    render() {
        return (
            <Modal visible={true} >
                <ImageViewer imageUrls={images} renderFooter={(currentIndex) => {
                    return (
                        <ScrollView style={{ height: 70, marginTop: -70 }}>
                            <Text style={{ color: '#fff', paddingLeft: 10, paddingRight: 10 }}>{imgsDesc[currentIndex]}</Text>
                        </ScrollView>
                    );
                }
                } />
            </Modal >
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    }
});

module.exports = index;

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用ab进行页面的压力测试

    ab是apache自带的一个很好用的压力测试工具,当安装完apache的时候,就可以在bin下面找到ab 参数说明及示例 我们可以模拟100个并发用户,对一个页...

    Java中文社群_老王
  • c# 操作IIS应用程序池

    直接代码: using System.DirectoryServices; // 添加引用 System.DirectoryServices try { ...

    Java中文社群_老王
  • HashMap 的 7 种遍历方式与性能分析!(强烈推荐)

    随着 JDK 1.8 Streams API 的发布,使得 HashMap 拥有了更多的遍历的方式,但应该选择那种遍历方式?反而成了一个问题。

    Java中文社群_老王
  • 云中的连续监测

    云计算服务可以动态分配、使用和取消分配资源,以满足高峰需求。几乎任何系统都需要比其他系统更多的资源,而云计算允许计算、存储和网络资源随着这种需求而扩展。

    静一
  • python opencv 图像尺寸变换

    CV_INTER_AREA - 使用象素关系重采样。当图像缩小时候,该方法可以避免波纹出现。当图像放大时,类似于 CV_INTER_NN 方法..

    于小勇
  • 支付对账系统怎么设计?

    对于公司自建支付系统来说,一般会根据业务的复杂程度不同,对接多个支付渠道。对于互联网公司而言,常见的渠道会对接支付宝、微信、ApplePay等;而金融类的公司则...

    用户5927304
  • 互联网早知道

    1、反欺诈白皮书 :男人更容易受骗,广东受骗人数最多 2、阿里组织架构调整:天猫升级为“大天猫” 3、百度将推出智能小游戏Layabox完成引擎适配支持 4、苹...

    程序员的酒和故事
  • 业界 | 从深度链接到语音助手,奇点机智想要撬动APP时代的搜索生意

    机器之心原创 作者:王艺、吴欣 语音助手「小不点」背后,是奇点机智一直坚持探索的方向—— In APP Search,即应用内搜索。创始人邬霄云想要将一个个独立...

    机器之心
  • OCP-052考试题库汇总(1)-CUUG内部解答版

      USER1.EMP has a referential integrity constraint defined on EMP.DNO that refer...

    用户5892232
  • 【OCP最新题库解析(052)--题44】USER1.EMP has a referential integrity

    该系列专题为2018年4月OCP-052考题变革后的最新题库。题库为小麦苗解答,若解答有不对之处,可留言,也可联系小麦苗进行修改。

    小麦苗DBA宝典

扫码关注云+社区

领取腾讯云代金券