2. 程式人生 > >一步步實現一個自適應的react-native拖拽排序

一步步實現一個自適應的react-native拖拽排序

阿新 • • 發佈：2019-01-20
(()=>{ // 備份被觸控的事件 this.touchCurItem = { ref: sortRefs.get(touchIndex), index: touchIndex, // 記錄之前的位置 originLeft: this.state.dataSource[touchIndex].originLeft, originTop: this
.state.dataSource[touchIndex].originTop, moveToIndex: touchIndex, } }) } } //滑動 moveTouch (nativeEvent,gestureState) { if (this.touchCurItem) { let dx = gestureState.dx let dy = gestureState.dy const
rowNum = parseInt(this.props.parentWidth/this.itemWidth); const maxWidth = this.props.parentWidth-this.itemWidth const maxHeight = this.itemHeight*Math.ceil(this.state.dataSource.length/rowNum) - this.itemHeight //出界後取最大或最小值防止出界 if (this.touchCurItem.originLeft + dx < 0
) { dx = -this.touchCurItem.originLeft } else if (this.touchCurItem.originLeft + dx > maxWidth) { dx = maxWidth - this.touchCurItem.originLeft } if (this.touchCurItem.originTop + dy < 0) { dy = -this.touchCurItem.originTop } else if (this.touchCurItem.originTop + dy > maxHeight) { dy = maxHeight - this.touchCurItem.originTop } let left = this.touchCurItem.originLeft + dx let top = this.touchCurItem.originTop + dy //置於最上層 this.touchCurItem.ref.setNativeProps({ style: { zIndex: touchZIndex, } }) //滑動時重新整理佈局，這裡直接重新整理Animated的數字就可以進行區域性重新整理了 this.state.dataSource[this.touchCurItem.index].position.setValue({ x: left, y: top, }) let moveToIndex = 0 let moveXNum = dx/this.itemWidth let moveYNum = dy/this.itemHeight if (moveXNum > 0) { moveXNum = parseInt(moveXNum+0.5) } else if (moveXNum < 0) { moveXNum = parseInt(moveXNum-0.5) } if (moveYNum > 0) { moveYNum = parseInt(moveYNum+0.5) } else if (moveYNum < 0) { moveYNum = parseInt(moveYNum-0.5) } moveToIndex = this.touchCurItem.index+moveXNum+moveYNum*rowNum if (moveToIndex > this.state.dataSource.length-1) moveToIndex = this.state.dataSource.length-1 // 其他item向左和向右滑動 if (this.touchCurItem.moveToIndex != moveToIndex ) { this.touchCurItem.moveToIndex = moveToIndex this.state.dataSource.forEach((item,index)=>{ let nextItem = null if (index > this.touchCurItem.index && index <= moveToIndex) { nextItem = this.state.dataSource[index-1] } else if (index >= moveToIndex && index < this.touchCurItem.index) { nextItem = this.state.dataSource[index+1] } else if (index != this.touchCurItem.index && (item.position.x._value != item.originLeft || item.position.y._value != item.originTop)) { nextItem = this.state.dataSource[index] //有時前一個或者後一個數據有個動畫差的原因無法回到正確位置，這裡進行矯正 } else if ((this.touchCurItem.index-moveToIndex > 0 && moveToIndex == index+1) || (this.touchCurItem.index-moveToIndex < 0 && moveToIndex == index-1)) { nextItem = this.state.dataSource[index] } //需要滑動的就進行滑動動畫 if (nextItem != null) { Animated.timing( item.position, { toValue: {x: parseInt(nextItem.originLeft+0.5),y: parseInt(nextItem.originTop+0.5)}, duration: slideDuration, easing: Easing.out(Easing.quad), } ).start() } }) } } } //觸控事件 endTouch (nativeEvent) { //clear if (this.measureTimeOut) clearTimeout(this.measureTimeOut) if (this.touchCurItem) { if (this.props.onDragEnd) { this.props.onDragEnd(this.touchCurItem.index,this.touchCurItem.moveToIndex) } //this.state.dataSource[this.touchCurItem.index].scaleValue.setValue(1) Animated.timing( this.state.dataSource[this.touchCurItem.index].scaleValue, { toValue: 1, duration: scaleDuration, } ).start() this.touchCurItem.ref.setNativeProps({ style: { zIndex: defaultZIndex, } }) this.changePosition(this.touchCurItem.index,this.touchCurItem.moveToIndex) this.touchCurItem = null } } //重新整理資料 changePosition(startIndex,endIndex) { if (startIndex == endIndex) { const curItem = this.state.dataSource[startIndex] this.state.dataSource[startIndex].position.setValue({ x: parseInt(curItem.originLeft+0.5), y: parseInt(curItem.originTop+0.5), }) return; } let isCommon = true if (startIndex > endIndex) { isCommon = false let tempIndex = startIndex startIndex = endIndex endIndex = tempIndex } const newDataSource = [...this.state.dataSource].map((item,index)=>{ let newIndex = null if (isCommon) { if (endIndex > index && index >= startIndex) { newIndex = index+1 } else if (endIndex == index) { newIndex = startIndex } } else { if (endIndex >= index && index > startIndex) { newIndex = index-1 } else if (startIndex == index) { newIndex = endIndex } } if (newIndex != null) { const newItem = {...this.state.dataSource[newIndex]} newItem.originLeft = item.originLeft newItem.originTop = item.originTop newItem.position = new Animated.ValueXY({ x: parseInt(item.originLeft+0.5), y: parseInt(item.originTop+0.5), }) item = newItem } return item }) this.setState({ dataSource: newDataSource },()=>{ if (this.props.onDataChange) { this.props.onDataChange(this.getOriginalData()) } //防止RN不繪製開頭和結尾 const startItem = this.state.dataSource[startIndex] this.state.dataSource[startIndex].position.setValue({ x: parseInt(startItem.originLeft+0.5), y: parseInt(startItem.originTop+0.5), }) const endItem = this.state.dataSource[endIndex] this.state.dataSource[endIndex].position.setValue({ x: parseInt(endItem.originLeft+0.5), y: parseInt(endItem.originTop+0.5), }) }) }

相關推薦

一步步實現一個自適應的react-native拖拽排序

(()=>{ // 備份被觸控的事件 this.touchCurItem = { ref: sortRefs.get(touchIndex), index: to

一步步實現一個基本的快取模組

注意後續程式碼及改進見後後文及github，文章上的並沒有更新。     1. 前言    2.  請求級別快取    2.1 多執行緒    3.  程序級別快取    3.1 分割槽與計數    3.2 可空快取值    3.3 封裝與整合    4.  小結 1. 前言 面向讀者：初、中級

CSS佈局——實現一個自適應瀏覽器視窗寬度的正方形

題意大意：建立一個正方形，其邊長定位相對瀏覽器視窗的寬度變化而變化。 實現思路：本次實現主要應用padding-bottom（或padding-left）屬性值等於width（或height）來實現等

React Native實現一個自定義模組

概述在 前期介紹React Native 專案結構的時候，我們講解過React的專案組成，其中說過 node_modules 資料夾，這是一個存放 node 模組的地方。我們知道React是用npm來管

WPF一步步實現完全無邊框自定義Window(附源碼)

nbsp interop -c 思路 pan cit 最終 auto pre 在我們設計一個軟件的時候，有很多時候我們需要按照美工的設計來重新設計整個版面，這當然包括主窗體，因為WPF為我們提供了強大的模板的特性，這就為我們自定義各種空間提供了可能性，這篇博客主要用來

以太坊dApp開發教程（如何一步步構造一個全棧式去中心化應用）（四）實現投票功能

一、更新智慧合約 增加投票功能後的智慧合約如下： pragma solidity ^0.4.2; contract Election { //候選者結構體 struct Candidate { uint id; string name; uint vot

Android GridView之新增分隔線，動態設定高度，實現高度自適應，並解決第一個item不顯示的問題

最近做一個專案時遇到一點問題，在這裡分享一下解決思路。 首先看效果圖： 這裡的需求是實現介面中的六個圖示，博主後來和同事討論過這個問題，用 GridView 實現費時費力好嘛，同事認為做6個 Button 就 好了，可能博主就愛鑽牛角尖吧，一開始認為怎麼辦只要還有辦法那就

一步步實現自定義View之雷達圖

之前在專案中需要用到雷達圖，我就在github上挑了一個用於專案中實現了需求。但是作為一隻有追求的程式猿，我還是想自己實現一下，忙裡偷閒地實現了一個雷達圖。下面看一下效果圖吧： 接著詳細地介紹一下我的實現思路吧 1.繪製背景圖 首先這裡需要注意的一

一步步實現 Redis 搜索引擎

行集 準備 exp sta 發的 ast 註意 自己 內容 來源：jasonGeng88 github.com/jasonGeng88/blog/blob/master/201706/redis-search.md 如有好文章投稿，請點擊 → 這裏了解詳情 場景 大家如

一、實現一個特殊的棧，在實現棧的基本功能的基礎上，再實現返回棧中最小元素的操作

empty util run print pri ont com res 字符串 請指教交流！ 1 package com.it.hxs.c01; 2 3 import java.util.Stack; 4 5 /* 6 實現一個特殊的棧，在實現棧的基本

div模擬textarea文本域輕松實現高度自適應

body post HR word-wrap overflow out 模擬 target get <style> .textarea{ width:400px; min-height:20px; max-height:300p

如何制作一個自適應手機、電腦、ipad的網頁方法總結大全

常見 ive sid 目前 區塊 right UNC 增加 自動 今天春哥技術博客和大家一起分享下當下如何制作一個自適應手機、電腦、ipad的網頁方法，手機上網的用戶已經越來越多，已經趕超PC端。隨著2G、3G、4G、免費WIFI和無線基站的不斷普及，越來越多的人開始使用手

css實現高度自適應正方形

spl splay code gin tle margin content div hidden <!DOCTYPE html> <html> <head> <title></title> </hea

一步步實現windows版ijkplayer系列文章之五——使用automake生成makefile

一步步實現windows版ijkplayer系列文章之一——Windows10平臺編譯ffmpeg 4.0.2，生成ffplay 一步步實現windows版ijkplayer系列文章之二——Ijkplayer播放器原始碼分析之音視訊輸出——視訊篇 一步步實現windows版ijkplayer系列文章之三——I

css利用padding百分比實現圖片自適應高度

應用場景 寬高比率，實現圖片自適應高度，防止圖片載入過程高度為0，載入完圖片高度撐起，它下面的div抖動問題 重點：CSS百分比padding都是相對寬度計算的 <div class="works-item-t"> <img src="./150x200.png">

一步步編寫一個AndroidStudio_NDK UDPClient 程式

1.配置NDK環境 1. 開啟一個專案，從選單欄中選擇 Tools > Android > SDK Manager。 2. 點選 SDK Tools 選項卡。 3. 勾選 LLDB，CMake&n

一步步實現windows版ijkplayer系列文章之三——Ijkplayer播放器原始碼分析之音視訊輸出——音訊篇

一步步實現windows版ijkplayer系列文章之三——Ijkplayer播放器原始碼分析之音視訊輸出——音訊篇 這篇文章的ijkplayer音訊原始碼研究我們還是選擇Android平臺，它的音訊解碼是不支援硬解的，音訊播放使用的API是OpenSL ES或AudioTrack。 OpenSL ES

一步步實現web程式資訊管理系統之二--後臺框架實現跳轉登陸頁面

SpringBoot springboot的目的是為了簡化spring應用的開發搭建以及開發過程。內部使用了特殊的處理，使得開發人員不需要進行額外繁鎖的xml檔案配置的編寫，其內部包含很多模組的配置只需要新增maven依賴即可使用，這項功能可謂對開發人員提供了大大的好處。使用springboot

js實現頁面自適應

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv=

一個標準的 react-native 元件

前言：react-native開發的app，雖然說是相容 android 和 ios 兩端；但其框架本身的設計思想有很多還是和前端類似的（畢竟是 react 的衍生產物）；其開發模式主要還是元件化！ 今天，來總結一下，一個 react-native 標準的元件包括哪些元素： 標準的元件完