React-native-zoom-view NPM

react-native-zoom-view

Ч��

ʵ��ͼƬ�Ŵ��С��һ��ؼ�

��װ

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	()=> {}