react-native – React Native允许用户重新排序滚动视图列表中的

发布时间：2020-12-15 20:20:52 所属栏目：百科来源：网络整理

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

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

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

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!