Giter Club home page Giter Club logo

react-native-zoom-view's Introduction

react-native-zoom-view

已放弃,有点问题在和swiper交接滑动时


效果

icon1.gif

  • 实现图片放大缩小和完美兼容三方左右滑控件

安装

  • yarn add react-native-zoom-view
  • npm install react-native-zoom-view

单独实现缩放

import ViewControl from 'react-native-zoom-view'
const {width,height} = Dimensions.get('window')

<ViewControl
    cropWidth={width}     
    cropHeight={height}
    imageWidth={width}
    imageHeight={height}>
    <Image
	style={{
	    width:width,
	    height:height,
	    resizeMode: 'contain'
	}}
	source={{
	    uri:item
	}}/>
</ViewControl>

实现缩放和左右滑

实现缩放和左右滑
import Swiper from 'react-native-swiper'
import ViewControl from 'react-native-zoom-view'

renderSwiperItemView() {
const imgs = [
    'http://img1.ph.126.net/u1dVCkMgF8qSqqQLXlBFQg==/6631395420169075600.jpg',
    'http://img2.ph.126.net/PqPdn4nhTSXTlPfDE_igJg==/6631322852401020356.jpg',
    'http://img1.ph.126.net/Ta6-WaHwuYMSehnn6Xcmyg==/6631426206490316698.jpg',
    'http://img0.ph.126.net/bCkBoPHS4d32mUJPqBIYrQ==/6631803338979839988.jpg',
    'http://img2.ph.126.net/bkaOfRyDoyddXri0GjpWjA==/6630608169839463386.jpg',
];
return imgs.map((item,i)=>{
    return (
	<ViewControl
	    key={i}
	    cropWidth={width}
	    cropHeight={height}
	    imageWidth={width}
	    imageHeight={height}>
	    <Image
		style={{
		    width:width,
		    height:height,
		    resizeMode: 'contain'
		}}
		source={{
		    uri:item
		}}/>
	</ViewControl>
    )
})
}

render() {
return (
    <Swiper
	loop={false}
	showsPagination={false}>
	{this.renderSwiperItemView()}
    </Swiper>
);
}
    

文档

Props Type Description DefaultValue
cropWidth(required) number operating area width 100
cropHeight(required) number operating area height 100
imageWidth(required) number picture width 100
imageHeight(required) number picture height 100
onClick ()=>void onClick ()=>{}
panToMove boolean allow to move picture with one finger true
pinchToZoom boolean allow scale with two fingers true
leaveStayTime number how many milliseconds after the finger presses to trigger onClick 100
leaveDistance number how many finger movement can also trigger onClick 10
horizontalOuterRangeOffset (offsetX?: number)=>void horizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation ()=>{}
onDragLeft ()=>void trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered ()=>{}
responderRelease (vx: number)=>void let go but do not cancel ()=>{}
maxOverflow number maximum sliding threshold 100
longPressTime number long press threshold 800
onLongPress ()=>void on longPress ()=> {}

Reference

  • 图片放到缩小和属性名字都是来自react-native-image-zoom,只是修改了和添加了一些方法使其更加兼容左右滑。
  • react-native-image-zoom

react-native-zoom-view's People

Contributors

mochixuan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

react-native-zoom-view's Issues

splash touch drag

splash view on position touch when i drag, you have solution? help me

Change the scale from a button

It's possible to change the scale frome button ? (1:1, or x2...)

<View> <ViewControl cropWidth={width} cropHeight={height} imageWidth={width} imageHeight={height}> <Image source={require("./img/map.png")} style={{width, height, position: "absolute"}} /> </ViewControl> <TouchableOpacity onClick={()=>{changeScale(1)}} style={{position: "absolute", bottom: 20, left: 70}}> <Image source={require("./img/zoom_out.png")} /> </TouchableOpacity> </View>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.