RN-第三方之react-native-image-zoom-viewer 图片轮播、放大、手势捏合

本文内容
多张图片放大后轮播、捏合效果
单张图片放大捏合效果

多张图片放大后轮播、捏合效果

npm i react-native-image-zoom-viewer --save
import ImageViewer from 'react-native-image-zoom-viewer';

render() {

    //主页是url   不是uri
    images.push({url: '图片地址'});

    return (
            <ImageViewer
                imageUrls={images}
                index={2} // 默认选中第几张图
                onClick={()=>{ // 点击
                    console.log('234');
                }}
            />
   
    );
  }

单张图片放大捏合效果

npm install --save react-native-transformable-image@latest
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}}
        />
      
    );
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容