React-NativeListView拖拽交换Item讲述.docVIP

React-Native ListView拖拽交换Item 先上效果图： 、 对，就是这样～ 在实现这个效果前，我的思路是这样的，布局-item可点击突出显示-可移动item-可交换item-抬起手指恢复正确的位置。下面一一解释。 布局 忘了说了，由于这个界面的item的元素较少，并且为了方便起见，我并没有采用ListView控件去实现这个list，而是使用数组map返回一个个itemView。 [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 render(){ return( View style={styles.container} NavigationBar title=首页内容展示顺序 isBackBtnOnLeft={true} leftBtnIcon=arrow-back leftBtnPress={this._handleBack.bind(this)} / {s.map((item, i)={ return ( View {...this._panResponder.panHandlers} ref={(ref) = this.items[i] = ref} key={i} style={[styles.item, {top: (i+1)*49}]} Icon name=ios-menu size={px2dp(25)} color=#ccc/ Text style={styles.itemTitle}{item}/Text /View ); })} /View ); } 前面NavigationBar部分不用看，自己封装的组件，通过map函数，可以依次遍历每个数组元素(s = [Android,iOS,前端,拓展资源,休息视频];)。因为我们需要后面能直接控制每个DOM（后面会直接操控它的样式），所以需要添加ref属性，不熟悉或者不明白ref这个prop的，可以参考这里。还需要注意的地方是，因为我们的item是可以拖拽移动的，能直接操控它们位置属性的就是绝对和相对布局，提供了top，left，right，bottom这些个props。贴一下item的stylesheet。 [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 item: { flexDirection: row, height: px2dp(49), width: theme.screenWidth, alignItems: center, backgroundColor: #fff, paddingLeft: px2dp(20), borderBottomColor: theme.segment.color, borderBottomWidth: theme.segment.width, position: absolute, }, 不用在意其他的props，最关键的最起作用的就是position属性，一旦设置，该View的位置就不会受控于flexbox的布局了，直接浮动受控于top，left这几个参数。对于{...this._panResponder.panHandlers} 这个属性，就会谈到React-native中的手势，也就是我们下一个内容。 item可点击突出显示