React Nativeスクロールビューの要素の順序を変更できるようにする

Question

要素の1つを長押しすることで、スクロールビューの要素の順序を変更できるようにしようとしています。私たちがやろうとしているのは、基本的に、ユーザーが長いスクロールを使ってスクロールビューリストの要素を拾い上げ、その要素をリストのどこかに置くことです。現在のところ、アニメーションビューを使用してすべての作業を行っていますが、その問題はスクロールとスワイプをアニメーション表示に統合することが難しいことです。そこで、スクロールビューに「ピックアップと並べ替え」を追加したいと考えています。

これを実行する方法がありますか？限りソートとして、あなたは、このようなlodashやアンダースコアなどのライブラリのいくつかのタイプを使用することができ、加えて使用してソートするためのいくつかの方法があります

_onLongPress() { 
    // Perform sort 
}, 

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

：

Answer 1

TouchableWithoutFeedbackがonLongPress方法を持って、あなたはこのようにそれを実装することができますバニラジャバスクリプト。スレッド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);