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

Question

我试图让用户通过长按其中一个元素来重新排列滚动视图列表中的元素。我们试图做的基本上是让用户使用长按来选择滚动视图列表中的一个元素，然后将该元素放在列表中的其他位置。目前我们使用动画视图来完成这一切，但问题是很难将滚动和滑动删除集成到动画视图中。所以我们希望将“拾取和重新排序”添加到滚动视图中。

有没有首选的方法来完成这个？

Answer 1

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

_onLongPress() {
  // Perform sort
},

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

就排序而言，您可以使用某种类型的库，例如 lodash 或下划线，此外还有一些使用 vanilla javascript 进行排序的方法。查看this 线程。

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

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);