react native实现监控手势上下拉动效果
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了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; } ponentWillMount () { 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;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:JavaScript 中如何实现并发控制
下一篇:vue实现双向数据绑定
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程