react-native 新闻标签排序编辑功能

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版)我也有，有需要可以回复！

原文地址：http://blog.csdn.net/nfq6612/article/details/78675515