reactnative动态设置值(react native实现监控手势上下拉动效果)
类别:编程学习 浏览量:1676
时间:2022-03-31 12:05:16 reactnative动态设置值
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;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- react怎样实现响应式计算属性(深入浅析React中diff算法)
- react新手指引页面编写(React+TypeScript进行项目构建案例讲解)
- react自适应布局如何实现(React实现分页效果)
- html5创作(HTML5录音实践总结Preact)
- react组件的参数怎样定义的(详解React中组件之间通信的方式)
- vscode react插件(基于visual studio code + react 开发环境搭建过程)
- react 使用实例(React+高德地图实时获取经纬度,定位地址)
- react组件参数(浅析React中的受控组件和非受控组件)
- react native web白屏(关于React Native 无法链接模拟器的问题)
- react hooks详解(React Hooks使用常见的坑)
- reactnative动态设置值(react native实现监控手势上下拉动效果)
- react怎么绑定state(react纯函数组件setState更新页面不刷新的解决)
- reactnative混合开发教程(教你使用vscode 搭建react-native开发环境)
- react循环有几种方法(React forwardRef的使用方法及注意点)
- react执行流程(React开启代理的2种实用方式)
- react组件分析(react-diagram 序列化Json解读案例分析)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
- 富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元 | 美通社(富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
- 富士胶片 中国 我们对上海的信心没有任何改变(富士胶片中国)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
热门推荐
- mysql带log的版本(聊聊MYSQL中Redo Log是什么?)
- MVC中modelstate的使用
- pythonsocket详细用法(Python中的Socket 与 ScoketServer 通信及遇到问题解决方法)
- php 处理html表单(PHP使用HTML5 FormData对象提交表单操作示例)
- linux中的软连接是什么(区分Linux硬链接与软链接)
- sqlserver数据库备份怎么还原(SQL Server2012数据库备份和还原的教程)
- 火狐查看json数据
- php在if里添加xml代码(PHP创建XML接口示例)
- css自动布局(CSS自适应布局思路)
- docker搭建mysql服务(Docker部署Mysql集群的实现)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9