React-Native ListView拖拽交换Item

《React-Native ListView拖拽交换Item》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、React-NativeListView拖拽交换Item先上效果图：、对，就是这样～在实现这个效果前，我的思路是这样的，布局->item可点击突出显示->可移动item->可交换item->抬起手指恢复正确的位置。下面一一解释。布局忘了说了，由于这个界面的item的元素较少，并且为了方便起见，我并没有采用ListView控件去实现这个list，而是使用数组map返回一个个itemView。[javascript]viewplaincopy在CODE上查看代码片派生到我的代码片render(){return(

2、e={styles.container}>{this.names.map((item,i)=>{return(this.items[i]=ref}key={i}style={[style

3、s.item,{top:(i+1)*49}]}>{item});})});}前面NavigationBar部分不用看，自己封装的组件，通过map函数，可以依次遍历每个数组元素(this.names=['Android','iOS','前端','拓展资源','休息视频'];)。因为我们需要后面能直接控制每个DOM（后面会直接操控

4、它的样式），所以需要添加ref属性，不熟悉或者不明白ref这个prop的，可以参考这里。还需要注意的地方是，因为我们的item是可以拖拽移动的，能直接操控它们位置属性的就是绝对和相对布局，提供了top，left，right，bottom这些个props。贴一下item的stylesheet。[javascript]viewplaincopy在CODE上查看代码片派生到我的代码片item:{flexDirection:'row',height:px2dp(49),width:theme.screenWidth,alignIte

5、ms:'center',backgroundColor:'#fff',paddingLeft:px2dp(20),borderBottomColor:theme.segment.color,borderBottomWidth:theme.segment.width,position:'absolute',},不用在意其他的props，最关键的最起作用的就是position属性，一旦设置，该View的位置就不会受控于flexbox的布局了，直接浮动受控于top，left这几个参数。对于{...this._panResponde

6、r.panHandlers}这个属性，就会谈到React-native中的手势，也就是我们下一个内容。item可点击突出显示如果不了解react-native中的手势，建议简单去了解下，直通车在这里还有这个。一旦需要自己实现手势，我们需要实现这几个方法。[javascript]viewplaincopy在CODE上查看代码片派生到我的代码片onStartShouldSetPanResponder:(evt,gestureState)=>true,／／开启手势响应onMoveShouldSetPanResponder:(evt

7、,gestureState)=>true,／／开启移动手势响应onPanResponderGrant:(evt,gestureState)=>{／／手指触碰屏幕那一刻触发},onPanResponderMove:(evt,gestureState)=>{／／手指在屏幕上移动触发},onPanResponderTerminationRequest:(evt,gestureState)=>true,／／当有其他不同手势出现，响应是否中止当前的手势onPanResponderRelease:(evt,gestureState)=>

8、{／／手指离开屏幕触发},onPanResponderTerminate:(evt,gestureState)=>{／／当前手势中止触发},简单介绍了下几个函数的意义，所以很明显，要实现item点击突出显示，我们需要在onPanRespondedGrant这里做事情。贴代码来解释，[jav