react-native - React Native 允许用户重新排序 ScrollView 列表中的元素

Question

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

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

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 上使用 sort 函数设置了一个基本项目.

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