React Native cho phép người dùng sắp xếp lại các phần tử trong danh sách cuộn scroll

Question

Tôi đang cố gắng để người dùng sắp xếp lại các phần tử trong danh sách cuộn bằng cách nhấn và giữ một trong các thành phần. Những gì chúng tôi đang cố gắng làm là cơ bản cho phép người dùng sử dụng một báo chí dài để chọn lên một phần tử của một danh sách scrollview, và sau đó đặt yếu tố đó ở một nơi khác trong danh sách. Hiện tại chúng tôi có tất cả hoạt động này bằng cách sử dụng chế độ xem hoạt ảnh, nhưng vấn đề với điều đó là rất khó để tích hợp cuộn và vuốt để xóa vào chế độ xem động. Vì vậy, chúng tôi hy vọng sẽ thêm "nhận và sắp xếp lại" vào một chế độ xem cuộn.

Có phương pháp ưu tiên nào để hoàn thành việc này không?

Answer 1

TouchableWithoutFeedback có một phương pháp onLongPress, bạn có thể thực hiện nó như thế này:

_onLongPress() { 
    // Perform sort 
}, 

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

Theo như phân loại, bạn có thể sử dụng một số loại thư viện như lodash hoặc dấu gạch dưới, cộng với có một số cách để sắp xếp sử dụng vani javascript. Xem chủ đề this.

Tôi cũng đã thiết lập một dự án cơ bản bằng cách sử dụng chức năng sắp xếp trên 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);