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

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

1 个答案: