一:
这个组件我自己研究了好久,虽然感觉代码逻辑有点乱和复杂,但好在也是完成了,所以打算趁着还有记忆的时候记录下来,也好自己以后回顾。
二:
1-:支持点击删除ListView行数据。
2-:支持点击置顶ListView行数据。
三:Coding
1-:添加一个数据源
data=[{
"name":'张一',
"age":10
},{
"name":'张二',
"age":11
},{
"name":'张三',
"age":12
},{
"name":'张四',
"age":13
}];
2-:写一个ListView组件
var ds= new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
this.state={
dataSource:ds.cloneWithRows(data)
};
<View style={styles.container}>
<ListView
style={{width:200,height:200,marginTop:100}}
dataSource={this.state.dataSource}
enableEmptySections={true}
//要得到rowID,就必须传值rowData, sectionID, rowID
renderRow={(rowData, sectionID, rowID)=>this.renderItem(rowData, sectionID, rowID)}
/>
</View>
renderItem=(rowData, sectionID, rowID)=>{
return (
<TouchableOpacity
//如过写成无参函数,rowID则为undefind,如果前面也加上rowID,传过去的rowID就是Object。
onPress={()=>this.deleteRowDate(rowID)}
>
<Text>名字:{rowData.name}</Text>
<Text>年龄:{rowData.age}</Text>
</TouchableOpacity>
)
};
3-:开始写删除行数据的方法
deleteRowDate=(rowID)=>{
删除所点击的rowID所在行的数据源
data.splice(rowID,1);
重新再给ListView赋值
var ds= new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
this.setState({
dataSource: ds.cloneWithRows(data)
});
};
4-:写置顶行数据的方法
deleteRowDate=(rowID)=>{
//将你你点击的行的数据赋值给一个空数组
let NewDatas=[ ];
NewDatas.push(data[rowID]);
//删除原来数组中你所点击行的数据
data.splice(rowID,1);
//减1的原因:数组第一个是0,而长度必定从1开始
let i=NewDatas.length-1;
//NewDatas[i]的意思是你你刚刚点击传过来的数据,而不是你第一次点击传过来的值
var NewData=[NewDatas[i],...data];
//然后我的想法是把data的数据全部删掉,再把NewData里面所有的数据给data,
//以来改变data,使下次点击时的data是行数据置顶后的,而不是最原始的data
let b=data.length;
data.splice(0,b);
for (let a=0;a<=NewData.length-1;a++){
data.push(NewData[a]);
}
//重新给ListView赋值
var ds= new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
this.setState({
dataSource: ds.cloneWithRows(NewData)
});
};
四:运行效果
代码比较乱,问题可能也遗留不少,如果大神们发现问题请留言,我一定第一时间改正。