import React, { PropTypes } from 'react';
import {
AppRegistry,
ListView,
PanResponder,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
class LongPressDrag extends React.Component {
constructor() {
super();
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder.bind(this),
onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder.bind(this),
onPanResponderMove: this._handlePanResponderMove.bind(this),
onPanResponderRelease: this._handlePanResponderEnd.bind(this),
onPanResponderTerminate: this._handlePanResponderEnd.bind(this),
});
this._previousLeft = 0;
this._previousTop = 0;
this._floatingStyles = {
style: {
left: this._previousLeft,
top: this._previousTop,
position: 'absolute',
height: 40,
width: 100,
backgroundColor: 'white',
justifyContent: 'center',
}
};
const rows = Array(11).fill(11).map((a, i) => i);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}).cloneWithRows(rows),
nativeEvent: undefined,
//Pan Responder can screw with scrolling. See https://github.com/facebook/react-native/issues/1046
scrollEnabled: true,
}
}
getDragElement() {
if (!this.state.nativeEvent) {
return null;
}
return (
<View
style={[this._floatingStyles.style,
{top: this._previousTop, left: this._previousLeft}
]}
ref={(floating) => {
this.floating = floating;
}}
>
<Text style={{alignSelf: 'center'}}>Floating Item</Text>
</View>
)
}
render() {
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
style={styles.container}
scrollEnabled={this.state.scrollEnabled}
{...this._panResponder.panHandlers}
/>
{this.getDragElement.bind(this)()}
</View>
)
}
renderRow(num) {
return (
<TouchableOpacity
style={styles.cell}
onLongPress={this.handleLongPress.bind(this)}
onPressIn={this.handlePressIn.bind(this)}
>
<Text style={styles.title}>{`Row ${num}`}</Text>
</TouchableOpacity>
);
}
handleLongPress(event) {
console.log(event);
this.setState({
nativeEvent: event.nativeEvent,
scrollEnabled: false,
})
}
handlePressIn(event) {
this._previousLeft = event.nativeEvent.pageX - 50;
this._previousTop = event.nativeEvent.pageY - 20;
}
_updateNativeStyles() {
this.floating && this.floating.setNativeProps({style: {left: this._previousLeft, top: this._previousTop}});
}
_handleStartShouldSetPanResponder(e, gestureState) {
return true;
}
_handleMoveShouldSetPanResponder(e, gestureState) {
return true;
}
_handlePanResponderMove(event, gestureState) {
this._previousLeft = event.nativeEvent.pageX - 50;
this._previousTop = event.nativeEvent.pageY - 20;
this._updateNativeStyles();
}
_handlePanResponderEnd(e, gestureState) {
this._previousLeft += gestureState.dx;
this._previousTop += gestureState.dy;
this.setState({ nativeEvent: undefined, scrollEnabled: true})
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20,
},
cell: {
flex: 1,
height: 60,
backgroundColor: '#d3d3d3',
borderWidth: 3,
borderColor: 'white',
justifyContent: 'center',
},
title: {
paddingLeft: 20,
},
});
AppRegistry.registerComponent('LongPressDrag',() => LongPressDrag);
相關：https：//github.com/facebook/react-native/issues/7941 – mquandalle