• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue实现双向数据绑定发布时间:2022-02-05
下一篇:
JavaScript 中如何实现并发控制发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap