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

更新时间：2021年05月19日 14:45:35 作者：Smile沛沛

这篇文章主要为大家详细介绍了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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

useEffect支持async及await使用方式
这篇文章主要为大家介绍了useEffect支持async及await的使用方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
react.js实现页面登录跳转示例
本文主要介绍了react.js实现页面登录跳转示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
详解React Native 采用Fetch方式发送跨域POST请求
这篇文章主要介绍了详解React Native 采用Fetch方式发送跨域POST请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
React Native使用Modal自定义分享界面的示例代码
本篇文章主要介绍了React Native使用Modal自定义分享界面的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
react分页显示数据的方法
分页在很多地方都可以用到，本文主要实现了react分页显示，主要使用三个组件，父组件listBox、列表组件List、按钮组件PageButton，感兴趣的可以了解一下
2021-08-08
react拖拽组件react-sortable-hoc的使用
本文主要介绍了react拖拽组件react-sortable-hoc的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
React项目中使用Redux的 react-redux
这篇文章主要介绍了React项目中使用Redux的 react-redux，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
这篇文章主要介绍了D3.js(v3)+react 制作一个带坐标与比例尺的柱形图 (V3版本) ，本文通过实例代码文字相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
2019-05-05
react+antd树选择下拉框中增加搜索框
这篇文章主要介绍了react+antd树选择下拉框中增加搜索框方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
React高阶组件使用详细介绍
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧
2023-01-01