1.类似头条和UC浏览器的标签编辑。
2.核心代码(PanResponder手势系统的使用)
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => {
return gestureState.dx !== 0 || gestureState.dx !== 0;
},
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
const { pageX, pageY } = evt.nativeEvent;
this.topIndex = Math.floor((pageY - this.offset) / (this._width / 2));
this.leftIndex = Math.floor(pageX / this._width);
this.index = this.topIndex * 4 + this.leftIndex;
this.prev_left = this._width * this.leftIndex;
this.prev_top = this._width / 2 * this.topIndex;
},
onPanResponderMove: (evt, gestureState) => {
//Alert.alert(JSON.stringify(this.index));
if (this.index > 0) {
this.left = this.prev_left + gestureState.dx;
this.top = this.prev_top + gestureState.dy;
let box = this.refs[this.items[this.index].id];
box.setNativeProps({
style: { top: this.top, left: this.left }
});
}
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
if (this.index > 0) {
const { pageX, pageY } = evt.nativeEvent;
this.finalTopIndex = Math.floor((pageY - this.offset) / (this._width / 2));
this.finalLeftIndex = Math.floor(pageX / this._width);
let index = this.finalTopIndex * 4 + this.finalLeftIndex;
this.prev_left = this._width * this.finalTopIndex;
this.prev_top = this._width / 2 * this.finalTopIndex;
if (index > 0 && this.items[index]) {
if (index > this.index) {
//往后移动
for (let i = this.index; i < index; i++) {
let box2 = this.refs[this.items[i + 1].id];
let top2 = Math.floor(i / 4) * (this._width / 2);
let left2 = (i % 4) * this._width;
//LayoutAnimation.linear();
LayoutAnimation.configureNext(
LayoutAnimation.create(
200,
LayoutAnimation.Types.linear,
LayoutAnimation.Properties.scaleXY
)
);
box2.setNativeProps({
style: {
top: top2,
left: left2
}
});
}
let box1 = this.refs[this.items[this.index].id];
let top1 = Math.floor(index / 4) * (this._width / 2);
let left1 = (index % 4) * this._width;
box1.setNativeProps({
style: {
top: top1,
left: left1
}
});
let temp = this.items[this.index];
for (let i = this.index; i < index; i++) {
this.items[i] = this.items[i + 1];
}
this.items[index] = temp;
} else if (index < this.index) {
//往前移动
for (let i = this.index; i > index; i--) {
let box2 = this.refs[this.items[i - 1].id];
let top2 = Math.floor(i / 4) * (this._width / 2);
let left2 = (i % 4) * this._width;
//LayoutAnimation.linear();
LayoutAnimation.configureNext(
LayoutAnimation.create(
200,
LayoutAnimation.Types.linear,
LayoutAnimation.Properties.scaleXY
)
);
box2.setNativeProps({
style: {
top: top2,
left: left2
}
});
}
let box1 = this.refs[this.items[this.index].id];
let top1 = Math.floor(index / 4) * (this._width / 2);
let left1 = (index % 4) * this._width;
box1.setNativeProps({
style: {
top: top1,
left: left1
}
});
let temp = this.items[this.index];
for (let i = this.index; i > index; i--) {
this.items[i] = this.items[i - 1];
}
this.items[index] = temp;
}
} else {
//移出范围,则重新回到原始位置
let box1 = this.refs[this.items[this.index].id];
let top1 = Math.floor(this.index / 4) * (this._width / 2);
let left1 = (this.index % 4) * this._width;
LayoutAnimation.linear();
box1.setNativeProps({
style: {
top: top1,
left: left1
}
});
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); //系统自带
}
}
},
//onPanResponderTerminate: (evt, gestureState) => this._release(evt, gestureState),
onShouldBlockNativeResponder: (event, gestureState) => true
});
3.git源码https://github.com/nfq6612/reactnative_labelEdit.git
4.(Xmarin c#版和 android studio java版)我也有,有需要可以回复!