React Native pozwala na zmianę kolejności elementów na liście przewijania

Question

Próbuję pozwolić użytkownikowi zmienić kolejność elementów na liście przewijania, naciskając długo jeden z elementów. Próbujemy zasadniczo pozwolić użytkownikowi na długie naciśnięcie, aby podnieść element listy przewijania, a następnie umieścić go w innym miejscu na liście. Obecnie wszystko działa za pomocą animowanego widoku, ale problem polega na tym, że trudno jest włączyć przewijanie i przeciąganie do usunięcia w animowanym widoku. Mamy nadzieję, że dodamy "pick up and reorder" do przewijania.

Czy istnieje preferowana metoda osiągnięcia tego?

Answer 1

TouchableWithoutFeedback ma metodę onLongPress, można wdrożyć go tak:

_onLongPress() { 
    // Perform sort 
}, 

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

miarę sortowania, można użyć pewnego rodzaju biblioteki takie jak lodash lub podkreślenia, plus istnieją pewne sposoby, aby posortować przy użyciu vanilla javascript. Sprawdź wątek this.

Przygotowałem również podstawowy projekt, korzystając z funkcji sortowania na liście 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);