react-native-image-zoom-viewer学习
react-native-image-zoom-viewer实现了类似微信朋友圈浏览图片的效果,点击小图片实现浏览原图效果。
安装:
npm i react-native-image-zoom-viewer --save
react-native link react-native-image-zoom-viewer
代码如下:
import ImageViewer from 'react-native-image-zoom-viewer';
import {Modal,} from'react-native'
{
this.state.imageArry.map((item, index)=> { return this._renderImage(item, index);
})
}
//图片排列
_renderImage(item, index) {
let url = item.url;
let source = {uri: url};
return (
<View style={{alignItems: 'center', marginTop: 5, marginLeft: 5}} key={'image' + index}>
<TouchableOpacity onPress={this._openMax.bind(this, source, index)}>
<Image source={source}
style={styles.img}/>
</TouchableOpacity>
</View>
);
}
_openMax(source, index) {
this.setState({
isImageShow: true,
imageIndex: index,
});
}
{this.state.isImageShow ?
<Modal visible={true} transparent={true}
onRequestClose={()=> {
this.setState({
isImageShow: false,
});
}}>
<ImageViewer imageUrls={this.state.dataArry}
onCancel={()=> {
this.setState({
isImageShow: false,
});
}}
index={this.state.imageIndex}
saveToLocalByLongPress={false}/>
</Modal>
: null}
react-native-image-zoom-viewer学习的更多相关文章
- React Native 简介:用 JavaScript 搭建 iOS 应用 (1)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- Hybrid App 和 React Native 开发那点事
简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开 ...
- React Native 从入门到原理
React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...
- 关于React Native 火热的话题,从入门到原理
本文授权转载,作者:bestswifter(简书) React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...
- 移动端跨平台方案对比:React Native、weex、Flutter
跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需 ...
- 最火移动端跨平台方案盘点:React Native、weex、Flutter
1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...
- 一次掌握 React 与 React Native 两个框架
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...
- React Native 从入门到原理一
React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却 ...
- React Native 入门到原理(详解)
抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...
- React Native新手入门
前言 React Native是最近非常火的一个话题,想要学习如何使用它,首先就要知道它是什么. 好像面对一个新手全面介绍它的文章还不多,我就归纳一下所有的资料和刚入门的小伙伴一起来认识它~ 将从以下 ...
随机推荐
- C++之 extern C的作用详解
extern "C"的主要作用就是为了能够正确实现C++代码调用其他C语言代码.加上extern "C"后,会指示编译器这部分代码按C语言的进行编译,而不是C+ ...
- SPI最大传输速率【转】
转自:https://www.silabs.com/community/mcu/8-bit/knowledge-base.entry.html/2017/01/13/spi_-asc0 问题 SPI作 ...
- java处理金证中登查询图片二进制流问题
package com.szkingdom.kess.model; import java.io.File; import java.io.FileOutputStream; import java. ...
- entos 7 mailx配置163邮箱发送邮件
配置: .com .com set smtp-auth-user=wcczcl set smtp-auth=login set smtp-use-starttls set ssl-verify=ign ...
- CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
- lr11_Run-time Settings选项介绍:
lr11_Run-time Settings选项介绍: ●Run Logic ●Pacing ●Log 下面对每个
- lr中用strtok函数分割字符串
需要在loadrunner里面获得“15”(下面红色高亮的部分),并做成关联参数. ,6,5,0,4,0,3,0,3,2,0,0,0,1 用web_reg_save_param取出“8,7,5,15, ...
- ubuntu sublime text 3 build 3083 license
经验证:sublime text 3 3083可用 ----- BEGIN LICENSE -----Andrew WeberSingle User LicenseEA7E-855605813A03D ...
- 通过NVM安装node
NVM(Node version manager)顾名思义,就是Node.js的版本管理软件,可以轻松的在Node.js各个版本间切换,项目源码GitHub 1.下载并安装NVM脚本 curl htt ...
- 【转】Vue v-bind与v-model的区别
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中 的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数 ...