React Native可变换图像组件
来源:互联网 发布:yum error14 curl 37 编辑:程序博客网 时间:2024/05/19 00:51
一个纯JavaScript写的可变换图像组件,如PhotoView或ImageViewer,支持手势,如平移,捏,双标签和fling,适用于iOS和Android。
https://github.com/ldn0x7dc/react-native-transformable-image
react-native-transformable-image
A pure JavaScript written transformable image component, like PhotoView or ImageViewer, supports gestures like pan, pinch, double tab and fling, works with both iOS and Android.
Written in pure JS, this component should be one of the most easy to use component among all the zoomable, scrollable PhotoView alike views on react-native.
Install
npm install --save react-native-transformable-image@latest
Usage
Quite same as the official Image, as below shows:
import Image from 'react-native-transformable-image';...render() { return ( ... <Image style={{width: width, height: height}} source={{uri: 'https://raw.githubusercontent.com/yoaicom/resources/master/images/game_of_thrones_1.jpg'}} //pixels={{width: 3607, height: 2400}} /> ... ); }
You can provide enableTransform
, enableScale
and enableTranslate
props to control corresponding features.
Other props
onTransformGestureReleased
andonViewTransformed
:
inherited from react-native-view-transformer
Attention
- If you are using react-native v0.27 and below, or if the image source is local (
source={require('...')}
), you should provide the pixels prop, likepixels={{width: 3607, height: 2400}}
(ask your API server to provide the pixels info for remote images). This prop is used to align the edge of the image content with the view's boundry and to determine the max scale. - By default, the offical iOS Image component will downsample if the image is larger than the view size.
react-native-transformable-image
disables downsampling to keep more image details when zoomed in. This could cause memory issues if your image is too large.
Image Gallery
If you are looking for an image gallery component, please refer to react-native-gallery, which is based on this component.
- React Native可变换图像组件
- React Native 组件生命周期
- react-native 自定义组件
- React native Image组件
- react native 组件生命周期
- react-native 组件demo
- react-native组件笔记
- React Native--组件Component
- React Native基础组件
- [React-Native]常用组件
- React Native组件生命周期
- React Native组件生命周期
- react-native 组件生命周期
- React-Native 组件 生命周期
- React Native 组件集合
- React Native 组件介绍
- react-native Alert组件
- React Native常用组件
- iOS开发中用ScrollView实现pickerView扁平化
- 《MFQ&PPDCS》学习心得--序
- 双向链表的宏实现——解析shttpd的链表实现
- maven详解之生命周期与插件(二)
- 如何使用反射API
- React Native可变换图像组件
- 怎么查看linux系统的版本,以及是32位或64位系统(这里以ubuntu和centos为例)
- Spring工作原理
- 图解Git
- GB28181技术基础之6
- 搭建maven私服——Nexus Repository
- 【SSH网上商城项目实战06】基于DataGrid的数据显示
- Java基础学习之面向对象及类
- 3.6 Git 分支