RN-第三方控件示例

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

2017-06-29  本文已影响2006人  精神病患者link常

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

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

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}}
        />
      
    );
  }
上一篇下一篇

猜你喜欢

热点阅读