React Native可变换图像组件

一个纯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 enableTransformenableScale and enableTranslate props to control corresponding features.

Other props
  • onTransformGestureReleased and onViewTransformed:

​ 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, like pixels={{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.


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值