有哪些信誉好的足球投注网站- 1、本文档共10页，可阅读全部内容。
- 2、有哪些信誉好的足球投注网站（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
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可点击突出显示
文档评论（0）