प्रतिक्रिया मूल उपयोगकर्ता को स्क्रॉलव्यू सूची

Question

में तत्वों को पुन: व्यवस्थित करने की अनुमति देता है, मैं उपयोगकर्ता को तत्वों में से किसी एक पर लंबे समय से दबाकर स्क्रॉलव्यू सूची में तत्वों को पुन: व्यवस्थित करने की कोशिश कर रहा हूं। हम जो करने की कोशिश कर रहे हैं वह मूल रूप से उपयोगकर्ता को स्क्रॉलव्यू सूची का एक तत्व लेने के लिए एक लंबी प्रेस का उपयोग करने देता है, और फिर उस तत्व को सूची में कहीं और डाल दें। वर्तमान में हमारे पास एनिमेटेड व्यू का उपयोग करके यह सब काम कर रहा है, लेकिन इसके साथ समस्या यह है कि स्क्रॉलिंग को एकीकृत करना और एनिमेटेड व्यू में स्वाइप-टू-डिलीट करना मुश्किल है। तो हम एक स्क्रॉलव्यू में "पिक अप और रीडर" जोड़ने की उम्मीद कर रहे हैं।

क्या इसे पूरा करने के लिए कोई पसंदीदा तरीका है? जहां तक ​​छँटाई के रूप में

_onLongPress() { 
    // Perform sort 
}, 

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

, आप इस तरह lodash के रूप में पुस्तकालय के कुछ प्रकार का उपयोग करें या अंडरस्कोर कर सकते हैं, के साथ साथ वहाँ का उपयोग कर सॉर्ट करने के लिए कुछ तरीके हैं:

Answer 1

TouchableWithoutFeedback एक onLongPress विधि है, तो आप इस तरह इसे लागू कर सकते हैं वेनिला जावास्क्रिप्ट। this धागा देखें।

मैंने 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);