React native realizes the monitoring gesture up and down pull effect

React native implements the monitoring gesture to pull up and down. The detailed core code is as follows:

Code:

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) => {
      },
  });
  }


//These two methods are triggered when the hand touches and leaves;
  _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 mission details</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;

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

VSCode builds React Native environment
Solve the problem of react-native soft keyboard popping up and blocking the input box
Detailed explanation of react-native WebView return processing (non-callback method can be solved)
React-native bridge Android native development detailed explanation
A brief discussion on React Native Flexbox layout (summary)
React Native react-navigation navigation usage details
Specific usage of FlatList in ReactNative
ReactNative FlatList usage and pitfalls package summary
Making a simple game engine with React Native

<<: MySQL FAQ series: When to use temporary tables

>>: How to configure nginx to limit the access frequency of the same IP