SortableListView只能整体拖动

来源:5-11 Popular(最热)模块的标签排序功能实现-2

慕仔3427096

2018-08-10

我的SortableListView只能像ListView一样整体向下拖动或者向上拖动  没法单个拖动排序  不知道是不是那个onRowMoved方法没有执行

http://img.mukewang.com/szimg/5b6d57160001c27106541174.jpg

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回答

CrazyCodeBoy

2018-08-10

代码没发现问题,这个功能是长按拖动,确认下姿势对不对哈

0
1
慕仔3427096
我的天 果然姿势不对。。。。。。。
2018-08-10
共1条回复

React Native技术精讲与高质量上线App开发

一个真实的上线项目,一次完整的开发过程,全面掌握React Native技术

1577 学习 · 727 问题

查看课程