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;

  

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/547041.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++或C 实现AES ECB模式加密解密,支持官方验证

本文主要介绍 AES 算法的加解密方法。本文使用的语言为 C&#xff0c;调用的 AES 库为&#xff1a;cryptopp。 1 概述 AES 加密算法的介绍如下&#xff08;摘自 WikiPedia&#xff09;&#xff1a; 高级加密标准&#xff08;英语&#xff1a;Advanced Encryption Standard&am…

Kali Linux 2019.4用U盘安装以及解决Kali Linux 2019.4中文乱码问题

一、利用Win32 Disk Imager 实现U盘刻录ISO 1.Kali Linux官网下载 2.Win32 Disk Imager官网下载地址 3.打开Win32 Disk Imager软件&#xff0c;添加下载的镜像文件&#xff0c;选择制作镜像的U盘&#xff0c;点击“”“写入”&#xff0c;等待写入成功完成&#xff01; 二、…

Javascript实现AES加密解密(ECB/CBC)

环境配置 js文件https://code.google.com/archive/p/crypto-js/downloads在线AES加密解密地址在线AES加密解密、AES在线加密解密、AES encryption and decryption--查错网下载完成后在页面中引入 rollups/aes.jscomponents/mode-ecb.jscomponents/pad-nopadding.js引入后页面 …

在PHP中利用wsdl创建标准webservice

参照整理&#xff1a; http://bbs.php100.com/read-htm-tid-95228.htmlhttp://www.ieliwb.com/wsdl-create-soapdiscovery/ 说明&#xff1a; 非标准的webservice&#xff0c;可能只能PHP才能访问 标准的webservice&#xff0c;就必须要使用wsdl在这里我只介绍标准的webserv…

Kali-Linux2019.04设置中文输入法

1.打开超级终端&#xff0c;输入 apt-get install fcitx 首先安装输入法框架 2.输入apt-get install fcitx-googlepinyin 然后安装google输入法 3.如下图&#xff0c;打开fcitx输入法配置 4.通过左下角的“”“”添加&#xff0c;选择刚才安装的google中文输入法&#xff0c…

C语言实现AES加密解密

AES加密是美国联邦政府采用的一种块加密标准&#xff0c;如今已经被全世界广为使用。嵌入式开发中我们也经常会用到加密解密算法&#xff0c;如果没有硬件模块来实现&#xff0c;就需要用到C代码软件实现。下面介绍调用mbedTLS中的AES加密解密函数实现AES算法。 mbedTLS是一个…

react-native绑定优酷SDK-附效果图和源码

ReactNative绑定优酷SDK需要用到两部分知识&#xff1a; 优酷本身的sdk绑定&#xff1b;RN与原生界面的交互&#xff1b; 效果&#xff1a; RN版本&#xff1a;0.49.3 代码更新日期&#xff1a;2017.10.26 下文也根据绑定需要分为两部分&#xff1a; 一、优酷sdk绑定&#…

我的nginx iis 负载均衡学习(环境搭建)

1&#xff0c;下载并安装nginx 比较简单 2&#xff0c;进行网站的配置 我使用了我的IIS 站点中已经拥有的两个站点 3&#xff0c;进行nginx 的配置 配置如下&#xff1a; 在server 节点之前添加如下的配置&#xff1a; upstream www.dalong.com { server 127.0.0.1; …

Kali-Linux-2019.04虚拟机与物理机实现复制粘贴功能

**1.打开虚拟机VM15&#xff0c;启动进入Kali系统&#xff0c;在虚拟机菜单栏&#xff0c;“虚拟机”->安装VMware Tool&#xff0c;弹出框选择“是”。*在Kali系统桌面出现光盘状态的VMware Tool。 1.在超级终端内操作 cd /media/cdrom0 2.复制VMwareTools文件到tmp目录&…

宝塔LNMP使用步骤nginx+php 7.2

安装BT面板 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh 安装LAMP / LNMP 推荐 PHP7.3(最低要求7.0) MySQL5.7(最低要求5.5) PHP 5.6.x即将停止安全支持 面板新建网站 进入面板, 网站, 新建…

react-native多图选择、图片裁剪(支持ad/ios图片个数控制)

前言&#xff1a; 目前关于rn比较知名并且封装好的图片选择控件很多&#xff0c;不过能同时支持多图片上传&#xff0c;个数控制兼容iOS/Ad的却寥寥无几&#xff0c;而今天介绍的这款框架可以实现&#xff1a;图片裁剪、最大图片个数限制、拍照、本地相册等功能。 效果&#x…

QT5主界面“关闭窗口”按钮设置弹出提示询问信息

QT5主界面为“关闭窗体”按钮和其action添加关闭窗口事件&#xff0c;可以询问是否退出 1.在信号与槽函数中&#xff0c;actQuit关联信号与槽函数&#xff0c;如下&#xff1a; 2.在mainwindow.h文件MainWindow类中添加关闭窗口事件closeEvent 3.在mainwindow.cpp文件添加vo…

Pytorch torchvision完成Faster-rcnn目标检测demo及源码详解

Torchvision更新到0.3.0后支持了更多的功能&#xff0c;其中新增模块detection中实现了整个faster-rcnn的功能。本博客主要讲述如何通过torchvision和pytorch使用faster-rcnn&#xff0c;并提供一个demo和对应代码及解析注释。 目录 如果你不想深入了解原理和训练&#xff0c…

Hadoop安装配置

1、集群部署介绍 1.1 Hadoop简介 Hadoop是Apache软件基金会旗下的一个开源分布式计算平台。以Hadoop分布式文件系统&#xff08;HDFS&#xff0c;Hadoop Distributed Filesystem&#xff09;和MapReduce&#xff08;Google MapReduce的开源实现&#xff09;为核心的Hadoop为用户…

iOS设置拍照retake和use按钮为中文简体

iOS设置拍照retake和use按钮为中文简体&#xff0c;设置有两种方式一个是代码直接控制&#xff0c;第二就是xcode配置本机国际化为“china”&#xff08;简体中文&#xff09;。 本文重点要说的是第二种&#xff0c;这样配置有两个好处&#xff0c;一是操作比较简单&#xff0…

QT5 QSqlQuery的SELECT INSERT UPDATE DELETE命令用法

1.QSqlQuery的SELECT查询记录用法&#xff1a; QSqlQuery q("SELECT * FROM departments");QSqlRecord rec q.record();int idCol rec.indexOf("departID"); // index of the field "departID"int nameColrec.indexOf("department")…

实时手势识别 【手部跟踪】Mediapipe中的hand

参考链接&#xff1a; 1&#xff09;github代码链接&#xff1a;https://github.com/google/mediapipe 2&#xff09;说明文档&#xff1a;https://google.github.io/mediapipe 3&#xff09;python环境配置文档&#xff1a;https://google.github.io/mediapipe/getting_sta…

react native仿微信性别选择-自定义弹出框

简述 要实现微信性别选择需要使用两部分的技术&#xff1a; 第一、是自定义弹出框&#xff1b; 第二、单选框控件使用&#xff1b; 效果 实现 一、配置弹出框 弹出框用的是&#xff1a;react-native-popup-dialog&#xff08;Git地址&#xff1a;https://github.com/jacklam…

斯蒂芬斯蒂芬但是当时发生的s

2019独角兽企业重金招聘Python工程师标准>>> 什么是啊啊啊啊啊啊啊 "> 转载于:https://my.oschina.net/ivanfjz/blog/190114

Error processing line 1 of vision-1.0.0-py3.6-nspkg.pth AttributeError: ‘NoneType‘ object has no

最近调试代码不知道安装什么包导致代码运行的时候出现报错 AttributeError: NoneType object has no attribute loader &#xff0c;虽然代码也能运行通过&#xff0c;但是报错还是很不舒服。 Remainder of file ignored Error processing line 1 of D:\Anaconda3\envs\fastrc…