React Native erlauben Benutzer, Elemente in einer Scrollview-Liste neu anordnen

Question

Ich versuche, den Benutzer die Elemente in einer Scrollview-Liste neu anordnen durch langes Drücken auf eines der Elemente. Was wir zu tun versuchen, ist im Wesentlichen, dass der Benutzer lange drücken muss, um ein Element einer Scrollview-Liste aufzunehmen, und dieses Element dann an einer anderen Stelle in der Liste zu platzieren. Momentan funktioniert dies alles mit der animierten Ansicht, aber das Problem ist, dass es schwierig ist, Scrollen und Wischen in die animierte Ansicht zu integrieren. Wir hoffen also, die "Aufnahme und Neuordnung" zu einem Scrollview hinzufügen zu können.

Gibt es eine bevorzugte Methode, um dies zu erreichen?

Answer 1

TouchableWithoutFeedback hat eine onLongPress Methode können Sie es wie folgt implementieren:

_onLongPress() { 
    // Perform sort 
}, 

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

Soweit sortieren, können Sie irgendeine Art von Bibliothek verwenden wie lodash oder unterstreichen, dazu gibt es einige Möglichkeiten, mit zu sortieren Vanille Javascript. Schauen Sie sich this Thread an.

Ich habe auch ein Basisprojekt mit der Sortierfunktion auf einem ListView here eingerichtet. mit meiner Frage

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