React Native拖拽删除Demo(触摸事件)

最近学习了下ReactNative中的触摸事件，写个例子实践一下。

Demo效果：

当触摸红球时开始触发事件，红球随着手指移动改变位置，松开时回到原位，如果拖入蓝色区域则删除（隐藏），单击左上方按钮红球显示在原位置。

主要是利用了View触摸函数onResponderMove（触摸屏幕并且移动）和onResponderRelease（出触摸事件结束函数）实现。

代码如下：

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
var os = Platform.OS; //ios  or  android

export class OnTouchPage extends Component {

    static navigationOptions=({navigation, screenProps})=>{
        return{
            header:null,
        }
    }

    constructor(props){
        super(props)
        this.state={
            m_top:'40%',
            m_left:width-40,
            isShow:false,
            isDelete:false
        }
    }

    componentWillMount(evt, gestureState){
        this.createPanResponder();
    }

    render(){
        return(
            
                {
                        this.setState(
                            {
                                m_top:'40%',
                                m_left:width-40,
                                isDelete:false
                            }
                        )
                    }}>
                    AddGlobule
                
                {
                    !this.state.isDelete?
                        :
                        null
                }

                {
                    this.state.isShow?
                        :
                        null
                }
            
        )
    }


    /**
     * 创建手势
     */
    createPanResponder = () => {
        this.panResponder = PanResponder.create({
            onMoveShouldSetPanResponder: () => Platform.OS === 'android',
        });
    };

    /**
     *  触摸屏幕并且移动时
     */
    _onResponderMove = (e) =>{
        let pageX = e.nativeEvent.pageX;
        let pageY = e.nativeEvent.pageY;
        if(this.state.isDelete){
            this.setState({
                m_top:pageY-15,
                m_left:pageX-15,
                isShow:false
            })
        }else {
            this.setState({
                m_top:pageY-15,
                m_left:pageX-15,
                isShow:true
            })
        }

    }

    /**
     * 松开屏幕 触摸事件结束时
     */
    _onResponderRelease = (e) =>{
        let smallY = this.state.m_top;
        let smallX = this.state.m_left;
        if(smallY>=height-200&&smallX>=width-200){
            this.setState({
                m_top:'40%',
                m_left:width-40,
                isDelete:true,
                isShow:false
            })
        }else {
            this.setState(
                {
                    m_top:'40%',
                    m_left:width-40,
                    isShow:false
                }
            )
        }

    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center',
    },

});