react native 手势响应
参考地址: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 手势响应的更多相关文章
- 混合开发的大趋势之一React Native手势行为那些事
转载请注明出处:王亟亟的大牛之路 最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(wow你懂的),导致好多天没发问了,其实这部分知识月头就想写了,一直没补. 话不多说先安利:htt ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- 【React Native】进阶指南之二(手势响应系统)
移动设备上的手势识别要比在 web 上复杂得多.用户的一次触摸操作的真实意图是什么,App 要经过好几个阶段才能判断.比如 App 需要判断用户的触摸到底是在滚动页面,还是滑动一个 widget,或者 ...
- [技术博客]react native事件监听、与原生通信——实现对通知消息的响应
在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数 ...
- 如何让你的 React Native 应用在键盘弹出时优雅地响应
原文地址:How to make your React Native app respond gracefully when the keyboard pops up 原文作者:Spencer Car ...
- React Native之 Navigator与NavigatorIOS使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native之 ScrollView介绍和使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native 之 Touchable 介绍与使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native APP结构探索
APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...
随机推荐
- arm-linux-gcc等交叉编译工具的安装
1.软件安装 步骤1:打开虚拟机,在/usr/local/下创建/usr/local/arm文件夹(一般用户自定义程序放到这里) 步骤2:先将安装包从Windows中弄到linux中去.可以用共享文件 ...
- ObservableCollection 类
假设您正在创建 Windows 窗体应用程序,并且已将 DataGridView 控件绑定到标准 List(Of Customer) 数据结构.您希望能够使网格中的项目与基础数据源中的值保持同步.也就 ...
- 杭电多校第七场-J-Sequence
题目描述 Let us define a sequence as belowYour job is simple, for each task, you should output Fn module ...
- 【Codeforces370E】Summer Reading [构造]
Summer Reading Time Limit: 20 Sec Memory Limit: 512 MB Description Input Output Sample Input 7 0 1 ...
- bzoj 1705: [Usaco2007 Nov]Telephone Wire 架设电话线——dp
Description 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务 于是,她们要求FJ把那些老旧的电话线换成性能更好的新电话线. 新的电话线架设在已有的N(2 <= ...
- 【HDU】6012 Lotus and Horticulture (BC#91 T2)
[算法]离散化 [题解] 答案一定存在于区间的左右端点.与区间左右端点距离0.5的点上 于是把所有坐标扩大一倍,排序(即离散化). 让某个点的前缀和表示该点的答案. 初始sum=∑c[i] 在l[i] ...
- css优先级机制
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 1.important >(内联样式)Inline style >(内部样式)Internal style sheet ...
- jq 浏览器窗口大小发生变化时
当调整浏览器窗口的大小时,发生 resize 事件: $(selector).resize(); 实例 对浏览器窗口调整大小进行计数: $(window).resize(function() { $( ...
- python自动开发之第二十五天
一.组合搜索 参考: http://www.cnblogs.com/ccorz/p/5985205.html 二.JSONP 1.在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但 ...
- Vue组件-组件的事件
自定义事件 通过prop属性,父组件可以向子组件传递数据,而子组件的自定义事件就是用来将内部的数据报告给父组件的. <div id="app3"> <my-com ...