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-Native中禁用Navigator手势返回的示例代码
在React-Native开发中,经常会用到导航.导航做什么用的呢,简单点说就是页面跳转. 个项目中,肯定有很多的页面要跳来跳去的,RN就给我们提供了Navigator组件,可以很好的管理页面的跳转. 在所有工作做完之后,发现有个bug!在从第一个界面跳转到下一个界面后,如果从屏幕左边向右滑,或者从上面想下滑,你会发现一个神奇的事情,那就是页面会通过滑动而返回到上一个界面.这让我们很尴尬了,本来打算禁止跳转返回的,或者返回时还要做些什么处理的,结果啥都没做,直接返回,可以说,这个功能有点适得其反
-
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
-
react native之ScrollView下拉刷新效果
本文实例为大家分享了react native之ScrollView下拉刷新效果的具体代码,供大家参考,具体内容如下 ScrollView的refreshControl属性用于下拉刷新,只能用于垂直视图,即horizontal不能为true. 1.创建自定义CKRefresh.js刷新组件 import React,{Component} from 'react'; import { View, Text, StyleSheet, ScrollView, RefreshControl, Dimen
-
React Native之ListView实现九宫格效果的示例
概述 在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码 ListView是基于ScrollView扩展得来的,所以具有ScrollView的相关属性: dataSource:数据源,类似于安卓中我们传入BaseAdapter的数据集合. renderRow:渲染某一行,类似于BaseAdapter中的getItem方法. onEndReached:简单说就是用于分页操作,在安卓中原生开发中,我们需要
-
react native仿微信PopupWindow效果的实例代码
在原生APP开发中,相信很多开发者都会见到这种场景:点击右上角更多的选项,弹出一个更多界面供用户选择.这种控件在原生开发中Android可以用PopupWindow实现,在iOS中可以用CMPopTipView,也可以自己写一个View实现.其类似的效果如下图所示: 实现思路分析: 要实现上面的视图,有很多种实现方式.前面的文章说过,要实现弹框相关的可以用React Native 提供的 Modal组件(Modal组件),使用Modal组件可以实现我们原生开发中的大多数效果. 要实现下拉三角,可
-
基于React Native 0.52实现轮播图效果
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的(Git地址) 一.总览 轮播图几乎是必备的效果,这里选择 react-native-swiper 来实现,效果如下图: 二.实现轮播图效果 1.通过npm安装react-native-swiper npm install react-native-swiper --save 2.在recommend.js引入react-native-swiper import Swiper from 'rea
-
React Native react-navigation 导航使用详解
一.开源库介绍 今年1月份,新开源的react-natvigation库备受瞩目.在短短不到3个月的时间,github上星数已达4000+.Fb推荐使用库,并且在React Native当前最新版本0.44中将Navigator删除.react-navigation据称有原生般的性能体验效果.可能会成为未来React Native导航组件的主流军.本篇内容基于[ ^1.0.0-beta.9 ]版本来介绍关于该库的使用和实战技巧.可以看到,虽然是beta版本,不过基本稳定,大家可放心在项目中使用.
-
React Native 脚手架的基本使用详解
构建项目 在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-native --v //查看版本 react-native init demo --version 0.48.0//安装指定的版本 react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的,安装什么模块以及进度 npm view
-
React Native 的动态列表方案探索详解
目录 背景 技术方案介绍 内存 异常处理 未来规划 背景 时至2022,精细化运营已经成为了各大App厂商的强需求,阿里的 DinamicX.Tangram 大家应该都很熟悉了,很多App厂商也自研了一些类似框架,基于DSL的动态化方案虽然有性能上的一些优势,但是毕竟不是图灵完备,一些需要逻辑动态下发的需求实现成本偏高,或由于DSL本身限制无法实现,针对这个问题我们使用RN进行了一下探索尝试, 利用我们已经相对完善的RN基建,结合客户端列表能力低成本的实现了一套的动态化能力,同时兼顾一定的性能体
-
React Native学习教程之Modal控件自定义弹出View详解
前言 最近在学习RN,好多知识都懒得写,趁今天有空,来一发吧,Modal控件的一个小demo:下面话不多说了,来一起看看详细的介绍吧. 参考文章地址:http://reactnative.cn/docs/0.27/modal.html#content Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity). 在嵌入React Native的混合应用中可以使用Modal.Modal可以使你应用中RN编写的那部分内容覆盖在原生视
-
React Native学习教程之自定义NavigationBar详解
前言 在刚开始学习React Native的时候,版本还是0.20,问题一大堆,Navigation这个问题更是很多,首先,是NavigationBar的问题,NavigationIOS有NavigationBar,Navigation却需要自定义一个,最后,我想了想,还是自定义一个view,岂不更好,现在新公司不用RN,我正好有点时间,就把自定义的NavigationBar分享给大家.好了少废话,上代码: 示例代码 // NavigationBar 导航条的自定义封装 // create by