美文网首页RN-第三方控件示例
RN-第三方之react-native-image-zoom-v

RN-第三方之react-native-image-zoom-v

作者: 精神病患者link常 | 来源:发表于2017-06-29 19:09 被阅读2006次

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

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

    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}}
            />
          
        );
      }
    

    相关文章

      网友评论

      • 522b6eaa8995:这个组件有个问题,放大后图片模糊了,没有原图清晰
        fangcaiwen:舅服你
        Skyling:放大后模糊 是图片问题 不是组件问题

      本文标题:RN-第三方之react-native-image-zoom-v

      本文链接:https://www.haomeiwen.com/subject/znrvcxtx.html