SortableListView只能整体拖动
来源:5-11 Popular(最热)模块的标签排序功能实现-2

慕仔3427096
2018-08-10
我的SortableListView只能像ListView一样整体向下拖动或者向上拖动 没法单个拖动排序 不知道是不是那个onRowMoved方法没有执行
export default class SortKeyPage extends React.Component{
constructor(props) {
super(props);
this.dataArray = [];
this.sortResultArray = [];
this.originalCheckedArray = [];// 原始排序数组
this.state = {
checkedArray: []// 最新排序数组
}
}
componentDidMount() {
this.getLabel()
}
getLabel() {
this.languageDao = new LanguageDao(FLAG_LANGUAGE.flag_key);
this.languageDao.fetch().then( res => {
// 获取选中标签
this.getCheckedLabel(res);
})
}
getCheckedLabel(res) {
this.dataArray = res;
let checkedArray = [];
for (let arr of res) {
if (arr.checked) checkedArray.push(arr)
}
this.setState({ checkedArray });
// 克隆已选择标签数组
this.originalCheckedArray = arrayUtils.cloneArray(checkedArray);
}
onBack() {
}
onSave() {
if(arrayUtils.isEqual(this.state,checkedArray, this.originalCheckedArray)) {
// 两个数组相等,则没有重新排序, 直接返回上一页
this.props.navigation.goBack()
}else {
// 两个数组不相等,则已重新排序,获取并保存排序之后的数组
this.getSortArray();
this.languageDao.save(this.sortResultArray);
this.props.navigation.goBack()
}
}
// 获取重新排序之后的数组
getSortArray() {
}
render() {
let rightBtn = <TouchableOpacity
onPress={() => this.onSave()}
>
<View style={{marginRight: 10}}>
<Text style={styles.saveBtn}>保存</Text>
</View>
</TouchableOpacity>
return (
<View style={styles.container}>
<NavigationBar
title="自定义标签"
leftButton={GetBtn.getleftBtn(() => this.onBack())}
rightButton={rightBtn}
/>
<SortableListView
style={{ flex: 1 }}
data={this.state.checkedArray}
order={Object.keys(this.state.checkedArray)}
onRowMoved={e => {
this.state.checkedArray.splice(e.to, 0, this.state.checkedArray.splice(e.from, 1)[0])
this.forceUpdate()
}}
renderRow={row => <SortItem data={row} />}
/>
</View>
)
}
}
class SortItem extends React.Component {
render() {
return <TouchableHighlight
underlayColor={'#eee'}
style={styles.item}
{...this.props.sortHandlers}
>
<View style={styles.view}>
<Image style={styles.image} source={require('../../assets/images/ic_sort.png')}/>
<Text>{this.props.data.name}</Text>
</View>
</TouchableHighlight>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff'
},
saveBtn: {
fontSize: 19,
color: '#ffffff'
},
item: {
padding: 15,
backgroundColor: '#F8F8F8',
borderBottomWidth: 1,
borderColor: '#eee',
},
view: {
flexDirection: 'row',
alignItems: 'center'
},
image: {
tintColor: '#2196F3',
width: 20,
height: 20,
marginRight: 10
}
})
1回答
-
代码没发现问题,这个功能是长按拖动,确认下姿势对不对哈
012018-08-10
相似问题