react native监控手势上下拉动 react native实现监控手势上下拉动效果

时间:2021-05-19 Smile沛沛人气:1

想了解react native实现监控手势上下拉动效果的相关内容吗，Smile沛沛在本文为您仔细讲解react native监控手势上下拉动的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：react,native监控手势上下拉动,react,native上下拉动,react,native手势上下拉动，下面大家一起来学习吧。

react native实现监控手势进行上下拉动效果,详细核心代码如下:

代码：

import {PanResponder} from 'react-native';


var Dimensions = require('Dimensions');
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;

class TaskfinishedPage extends Component {
  constructor(props) {
    super(props);
    console.disableYellowBox = true;
    this.state = {
      silderMargin: deviceHeight-230,
    };
      this.lastY1 = this.state.silderMargin;
  }
 
  componentWillMount () {

    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => {
          return true;
      },
      onMoveShouldSetPanResponder:  (evt, gestureState) => {
          return true;
      },
      onPanResponderGrant: (evt, gestureState) => {
          this._highlight();
      },
      onPanResponderMove: (evt, gestureState) => {
          console.log(`gestureState.dx : ${gestureState.dx}   gestureState.dy : ${gestureState.dy}`);
          if(50<this.lastY1 + gestureState.dy&&this.lastY1 + gestureState.dy<deviceHeight-230){
             this.setState({
              // marginLeft1: this.lastX1 + gestureState.dx,
              silderMargin: this.lastY1 + gestureState.dy,
          });
          }
         
      },
      onPanResponderRelease: (evt, gestureState) => {
          this._unhighlight();
        
          this.lastY1 = this.state.silderMargin;
      },
      onPanResponderTerminate: (evt, gestureState) => {
      },
  });
  }


//这两个方法手触摸以及离开时触发;
  _unhighlight(){
    this.setState({
        sliderBackgroundcolor: 'transparent',
    });
}

_highlight(){
    this.setState({
        sliderBackgroundcolor: 'transparent',
    });
}


 render() {
    return (
      <Container}>

        <Header>
          <Left>
            <Button transparent onPress={() => {    
                NavigationUtil.resetGoBack(this.props.navigation);
            }}>
              <Icon name='arrow-back' style={{color:'#000'}}/>
            </Button>
          </Left>
          <Body >
          <Text style={{color:'#000'}}>Finshed任务详情</Text>
          </Body>
          <Right />
        </Header>
        <View style={{ flex: 1 }}>
          <View style={
                [styles.panelView,
                {
                    backgroundColor: this.state.sliderBackgroundcolor,
                    marginTop: this.state.silderMargin,
                    zIndex:100
                
                }
                ]}
                  {...this._panResponder.panHandlers}
          >
       
            
          </View>
          
 
          </View>
      </Container>
    );
    }


const styles = {
  panelView: {
    width: deviceWidth-20,
    height: 410,
    marginLeft:10,
    marginRight:10,
    borderRadius:6,  
 }
}

export default TaskfinishedPage;

加载全部内容