参考地址:https://www.jianshu.com/p/935e5c6a5064

官方文档地址:https://facebook.github.io/react-native/docs/panresponder.html

官方翻译地址:https://reactnative.cn/docs/0.50/panresponder.html

首先,通过react native引入PanResponder
import {PanResponder} from 'react-native';   //这里是当移动了超过20,才会进行隐藏或是显示
_panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
console.log('开始移动:');
this.setState({ moveBG: '#eeeeee' })
},
onPanResponderMove: (evt, gs) => {
console.log('正在移动:X轴:' + gs.dx + ',Y轴:' + gs.dy);
},
onPanResponderRelease: (evt, gs) => {
console.log('结束移动:X轴:' + gs.dx + ',Y轴:' + gs.dy);
this.setState({
moveBG: '#FFF'
});
if (gs.dy > 20) {
this.setState({
IsShowOrderInfoFlag: true
})
} else if (gs.dy < -20) {
this.setState({
IsShowOrderInfoFlag: false
})
}
}
});

以上为声明手势响应,将手势响应方法放入至某一个View中

Render方法中
<View style={styles.container}>
{
this.state.IsShowOrderInfoFlag ?
<View style={[styles.headerView, { backgroundColor: '#e0e0e0' }]}>
<Text style={styles.orderInfoLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Order.zdCode_Text')}{this.props.bundleEntity.bundleInfo.zdCode}</Text>
<Text style={styles.orderInfoLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Order.Customer_Text')}{this.props.bundleEntity.bundleInfo.custName}|{this.props.bundleEntity.bundleInfo.custCode}</Text>
<Text style={styles.orderInfoLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Bundle.Bundle_Text')}{this.props.bundleEntity.bundleInfo.bundle.groupNo}</Text>
</View>
:
null
}
<View style={[styles.headerView, { backgroundColor: this.state.moveBG }]} {...this._panResponder.panHandlers}>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.QAComment_Text')}</Text>
<TextInput style={styles.qaCommentText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.QAComment_Placeholder')}
maxLength={10000}
multiline={true}
returnKeyType='done'
onChangeText={(text) => {
let oldHandmadeCheckData = this.state.HandmadeCheckData;
oldHandmadeCheckData.QAComment = text;
this.setState({ HandmadeCheckData: oldHandmadeCheckData })
}}
value={this.state.HandmadeCheckData.QAComment}
/>
<Button onPress={() => {
this._removeQAComment();
}}>
<Icon style={styles.removeQACommentIcon} name="remove" size={32} />
</Button>
<Button onPress={() => {
this.refs.qaCommentModal.showQACommentModal(this.props.handmadeCheckEntity.AllQACommentList, this);
}}>
<Icon style={styles.qaCommentIcon} name="comment" size={32} />
</Button> <Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Pass_Product_Count_Text')}</Text>
<TextInput style={styles.EditText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Pass_Product_Count_Placeholder')}
editable={true}
keyboardType='numeric'
returnKeyType='done'
value={this.state.PassProductCount}
onBlur={() => {
this.props.onSetPassProduct(this.state.PassProductCount)
}}
onChangeText={(text) => {
this.setState({ PassProductCount: text })
}}
/>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Can_Not_Rework_Product_Count_Text')}</Text>
<TextInput style={styles.EditText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Can_Not_Rework_Product_Count_Placeholder')}
editable={true}
keyboardType='numeric'
returnKeyType='done'
value={this.state.CanNotReworkProductCount}
onBlur={() => {
this.props.onSetCannotReworkProduct(this.state.CanNotReworkProductCount)
}}
onChangeText={(text) => {
this.setState({ CanNotReworkProductCount: text })
}}
/>
</View>
{
this.state.IsShowOrderInfoFlag ?
<View style={styles.headerView}>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.CheckTime_Text')}</Text>
<TextInput style={styles.checkTimeText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.CheckTime_Placeholder')}
editable={false}
keyboardType='numeric'
returnKeyType='done'
value={this.state.HandmadeCheckData.CheckTime}
/>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Request_Check_Count_Text')}</Text>
<TextInput style={styles.checkTimeText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Request_Check_Count_Placeholder')}
editable={false}
keyboardType='numeric'
returnKeyType='done'
value={this.state.RequestCheckCount}
/>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Issue_Product_Count_Text')}</Text>
<TextInput style={styles.checkTimeText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Issue_Product_Count_Placeholder')}
editable={false}
keyboardType='numeric'
returnKeyType='done'
value={this.state.IssueProductCount}
/>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Handmade_Issue_Product_Count_Text')}</Text>
<TextInput style={styles.checkTimeText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Handmade_Issue_Product_Count_Placeholder')}
editable={false}
keyboardType='numeric'
returnKeyType='done'
value={this.state.HandmadeIssueProductCount}
/>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Non_Handmade_Issue_Product_Count_Text')}</Text>
<TextInput style={styles.checkTimeText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Non_Handmade_Issue_Product_Count_Placeholder')}
editable={false}
keyboardType='numeric'
returnKeyType='done'
value={this.state.NonHandmadeIssueProductCount}
/>
</View>
: null
}

效果

react native 手势响应的更多相关文章

  1. 混合开发的大趋势之一React Native手势行为那些事

    转载请注明出处:王亟亟的大牛之路 最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(wow你懂的),导致好多天没发问了,其实这部分知识月头就想写了,一直没补. 话不多说先安利:htt ...

  2. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  3. 【React Native】进阶指南之二(手势响应系统)

    移动设备上的手势识别要比在 web 上复杂得多.用户的一次触摸操作的真实意图是什么,App 要经过好几个阶段才能判断.比如 App 需要判断用户的触摸到底是在滚动页面,还是滑动一个 widget,或者 ...

  4. [技术博客]react native事件监听、与原生通信——实现对通知消息的响应

    在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数 ...

  5. 如何让你的 React Native 应用在键盘弹出时优雅地响应

    原文地址:How to make your React Native app respond gracefully when the keyboard pops up 原文作者:Spencer Car ...

  6. React Native之 Navigator与NavigatorIOS使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  7. React Native之 ScrollView介绍和使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  8. React Native 之 Touchable 介绍与使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  9. React Native APP结构探索

    APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...

随机推荐

  1. arm-linux-gcc等交叉编译工具的安装

    1.软件安装 步骤1:打开虚拟机,在/usr/local/下创建/usr/local/arm文件夹(一般用户自定义程序放到这里) 步骤2:先将安装包从Windows中弄到linux中去.可以用共享文件 ...

  2. ObservableCollection 类

    假设您正在创建 Windows 窗体应用程序,并且已将 DataGridView 控件绑定到标准 List(Of Customer) 数据结构.您希望能够使网格中的项目与基础数据源中的值保持同步.也就 ...

  3. 杭电多校第七场-J-Sequence

    题目描述 Let us define a sequence as belowYour job is simple, for each task, you should output Fn module ...

  4. 【Codeforces370E】Summer Reading [构造]

    Summer Reading Time Limit: 20 Sec  Memory Limit: 512 MB Description Input Output Sample Input 7 0 1 ...

  5. bzoj 1705: [Usaco2007 Nov]Telephone Wire 架设电话线——dp

    Description 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务 于是,她们要求FJ把那些老旧的电话线换成性能更好的新电话线. 新的电话线架设在已有的N(2 <= ...

  6. 【HDU】6012 Lotus and Horticulture (BC#91 T2)

    [算法]离散化 [题解] 答案一定存在于区间的左右端点.与区间左右端点距离0.5的点上 于是把所有坐标扩大一倍,排序(即离散化). 让某个点的前缀和表示该点的答案. 初始sum=∑c[i] 在l[i] ...

  7. css优先级机制

    所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.   1.important >(内联样式)Inline style  >(内部样式)Internal style sheet ...

  8. jq 浏览器窗口大小发生变化时

    当调整浏览器窗口的大小时,发生 resize 事件: $(selector).resize(); 实例 对浏览器窗口调整大小进行计数: $(window).resize(function() { $( ...

  9. python自动开发之第二十五天

    一.组合搜索 参考: http://www.cnblogs.com/ccorz/p/5985205.html 二.JSONP 1.在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但 ...

  10. Vue组件-组件的事件

    自定义事件 通过prop属性,父组件可以向子组件传递数据,而子组件的自定义事件就是用来将内部的数据报告给父组件的. <div id="app3"> <my-com ...