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;

ReactNative实现图集功能相关推荐

织梦php网站修改教程,织梦DEDEcms织梦软件模型增加图集功能教程（含修改文件下载）...
这篇文章主要为大家详细介绍了织梦DEDEcms织梦软件模型增加图集功能教程(含修改文件下载),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 织梦DEDEcms织 ...
【android】高仿京东商城App，集成react-native热更功能
简介高仿京东商城项目具有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能,功能还在持续更新中-如果对你有帮助,给个star 使用kotlin语言开发,项目使用模块化开发,降低 ...
高仿京东商城app、集成react-native热更新功能
简介这是一个高仿京东商城的安卓项目,有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能 kotlin . retrofit2 + okhttp3 网络请求 .多模块 leak ...
织梦图集php,dedecms织梦文章模型增加图集功能教程
这篇文章主要为大家详细介绍了dedecms织梦文章模型增加图集功能教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 很多时候我们在站点前端输出图片+对应的图片 ...
高仿京东商城App，集成react-native 热更新功能
前言这是一个高仿京东商城的android 混合项目,具有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能,使用最新MVI架构开发 kotlin . retrofit2 + o ...
linux目录表及功能n鸟哥,Linux 档案目录的结构及功能（鸟哥私房菜）
MVVM架构~knockoutjs系列之验证信息自定义输出~再续返回目录对于一个项目的表单验证,方式有很多,效果也有很多,具体使用哪种完成取决于产品这边,产品让你用什么,你就要用什么,而做为开发人 ...
云炬Android开发笔记 7登陆注册功能开发
阅读目录 1.注册UI及验证逻辑实现 1.1 布局 1.2 注册信息的验证和逻辑 2.登录UI及验证逻辑实现 2.1 布局 2.2 登录的逻辑框架 3.服务器数据简单介绍 3.1 服务器的数据 3.2 ...
Laya自动图集原理
关于Laya自动图集 Laya会把size小于512*512的图片打入自动大图集中.如果图片被打入自动图集中,图片的内存就交由Laya自动处理,开发者不能手动删除. Laya最多生成6张2048*20 ...
Unity UGUI图集专题
一:图集介绍什么是图集:我们可以将其理解为将一系列小图合并为一张大图.使用图集可以减少drawcall,提升效率. 游戏中的图片模型最终是要给到显卡去渲染的,然后CPU通知GPU要开始渲染,这一 ...

ReactNative实现图集功能

ReactNative实现图集功能相关推荐

最新文章

热门文章