React Native Sürükle Bırak

React native ile objeleri sürükleyip bırakarak işlem yapmak istiyorsak yani resimlere yazılara yada view lere bir dragble özelliği kazandırmak istiyorsak işte size harika bir kütüphane.

Öncelikle kütüphanemizi projemize yükleyelim . ;

npm install react-native-draggable --save

sonrasında import edelim .

import Draggable from 'react-native-draggable';

sonrasında örnek bir proje hazırlayalım hemen ;

return (
    <View >
        <Draggable renderSize={56} renderColor='black' offsetX={-100} offsetY={-200} renderText='A' pressDrag={()=>alert('touched!!')}/> 
        <Draggable reverse={false} renderColor='red' renderShape='square' offsetX={0} offsetY={0} renderText='B'/>
        <Draggable/>
    </View>
);

react-native-dragble

 

Mavi bir ekrana bir resim ekleyerek bu resmi ekranda hareket ettirelim ve uzun basınsa dokununca bırakınca yada sürükleyince bir fonksiyonun nasıl çalıştığını gözlemleyelim ;

 

return (
    <View style={{backgroundColor: 'blue', flex: 0.5}} >
        <Draggable renderShape='image' imageSource={this.state.source} renderSize={80} 
            offsetX={0} offsetY={0}
            pressDragRelease={this._changeFace}
            longPressDrag={()=>console.log('long press')}
            pressDrag={()=>console.log('press drag')}
            pressInDrag={()=>console.log('in press')}
            pressOutDrag={()=>console.log('out press')}
        />  
    </View>
);

 

Properties

PropTypeExampleDefaultDescription
renderTextstring‘ANY’‘+’text of draggable
renderShapestring‘circle’ , ‘square’ , ‘image’‘circle’shape type
imageSourcesourcerequire(‘./img/xxx.png’)image source
renderSizenumber{36}{36}draggable size
offsetXnumber{0}{100}offsetX with center
offsetYnumber{100}{100}offsetY with center
xnumber{0}position x
ynumber{0}position y
znumber{0}position z
renderColorstring‘black’‘yellowgreen’Colors
reversebool{true}{true}reverse flag

Events

EventTypeDescription
pressDragfunconPress event
pressDragReleasefuncrelease drag event
longPressDragfunclong press event
pressInDragfuncin press event
pressOutDragfuncout press event

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir