Skip to content

Latest commit

 

History

History
52 lines (31 loc) · 1.95 KB

lession4.手势触摸响应链说明.md

File metadata and controls

52 lines (31 loc) · 1.95 KB

#React-android的手势响应链 由于react native 不同于 webview,最终落地是 实打实的 native view componet 。

所以在响应事件分发情况上来说,是完全具备native的各种touch处理能力的:fling,touch,tap,click,double click and ....。

能够有分级,分阶段,父view与子view直接的 消息传递和消息处理链的存在。

对应的ReactJS处理的实现在ResponderEventPlugin.js

#交互上体验提升 之前使用h5的方式,对于客户端手势交互的反馈不是很友好,但是native可以很好的解决该问题

系统提供标准的selector.xml方式让开发者快速实现“二态效果”,包括其他的cancel状态的变更,快速,灵敏的反应对于app的交互体验将远好于web app的体验

#ReactJs端的实现

View.props.onStartShouldSetResponder: (evt) => true View.props.onMoveShouldSetResponder: (evt) => true View.props.onResponderGrant: (evt) => {} View.props.onResponderReject: (evt) => {} View.props.onResponderMove: (evt) => {} View.props.onResponderRelease: (evt) => {} View.props.onResponderTerminationRequest: (evt) => true View.props.onResponderTerminate: (evt) => {}

##这里的evt 是一个touch的语义的封装:

nativeEvent

changedTouches - Array of all touch events that have changed since the last event

identifier - The ID of the touch

locationX - The X position of the touch, relative to the element

locationY - The Y position of the touch, relative to the element

pageX - The X position of the touch, relative to the screen

pageY - The Y position of the touch, relative to the screen

target - The node id of the element receiving the touch event

timestamp - A time identifier for the touch, useful for velocity calculation

touches - Array of all current touches on the screen

##如果父容器需要消耗事件 View.props.onStartShouldSetResponderCapture: (evt) => true,

View.props.onMoveShouldSetResponderCapture: (evt) => true,