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