React Native允许用户重新排序滚动视图列表中的元素

Question

我试图让用户通过长按其中一个元素来重新排序滚动视图列表中的元素.我们要做的是基本上让用户使用长按来获取滚动视图列表的元素,然后将该元素放在列表中的其他位置.目前我们使用动画视图完成所有工作,但问题在于难以将滚动和滑动到删除集成到动画视图中.所以我们希望在滚动视图中添加"拾取和重新排序".

有没有一种方法可以实现这一目标？

Answer 1

TouchableWithoutFeedback有一个onLongPress方法，你可以这样实现：

_onLongPress() {
  // Perform sort
},

<TouchableWithoutFeedback onLongPress={ () => this._onLongPress() }>
  <Text>Click and Hold to call onLongPress</Text>
</TouchableWithoutFeedback>

至于排序，您可以使用某种类型的库，例如 lodash 或 underscore，此外还有一些使用 vanilla javascript 进行排序的方法。查看此线程。

我还在此处使用 ListView 上的排序功能设置了一个基本项目。

https://rnplay.org/apps/mpBkTg

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableWithoutFeedback
} = React;

var data = [{name: 'data1', number: 1}, {name: 'data2', number: 2}, {name: 'data3', number: 3}, {name: 'data4', number: 4}, {name: 'data5', number: 5}];
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var _ = require('lodash');

var SampleApp = React.createClass({

  getInitialState() {
    return {
        dataSource: ds.cloneWithRows(data),
      reverse: false
    }
  },

  _onLongPress() {
    if(this.state.reverse) {
      data = _.sortBy(data, (d) =>  d.number)
      this.setState({
        reverse: false,
        dataSource: ds.cloneWithRows(data),
      })
    } else {
      data = _.sortBy(data, (d) =>  -d.number)
        this.setState({
        dataSource: ds.cloneWithRows(data),
        reverse: true
      })
    }

  },

  _renderRow(rowdata){
    return <Text>{rowdata.name}</Text>               
  },                                  

  render: function() {
    return (
      <View style={styles.container}>
        <View style={[styles.button]}>
            <TouchableWithoutFeedback onLongPress={ () => this._onLongPress() }>
            <Text style={[styles.buttonText]}>Click and Hold</Text>
          </TouchableWithoutFeedback>
        </View>
        <ListView dataSource={this.state.dataSource} renderRow={this._renderRow} />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60
  },
  button: {
    backgroundColor: '#ebebeb',
    borderBottomWidth:1,
    borderBottomColor: '#ddd',
  },
  buttonText: {
    fontSize:18,
    flex:1,
    textAlign:'center',
    marginTop:20,
    marginBottom:20
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);