REACT NATIVE 系列教程之一触摸事件的两种形式与四种TOUCHABLE组件详解

Posted 2022-05-28 李华明Himi

本站文章均为  李华明Himi  原创,转载务必在明显处注明： 
转载自【黑米GameDev街区】 原文链接:  http://www.himigame.com/react-native/2203.html

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2203.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">

本文是RN（React Native）系列教程第一篇，当然也要给自己的群做个广告：

  React Native @Himi ：126100395  刚创建的群，欢迎一起学习、讨论、进步。

本文主要讲解两点：

1.   PanResponder：触摸事件，用以获取用户手指所在屏幕的坐标（x,y）或触发、或滑动、或抬起几种事件通知。

2.   Touchable：React为我们封装好的触摸组件。引用原文：“响应系统用起来可能比较复杂。所以我们提供了一个抽象的Touchable实现，用来做“可触控”的组件。这一实现利用了响应系统，使得你可以简单地以声明的方式来配置触控处理。”

    一：触摸事件各事件响应与坐标获取

1. 在import React 中添加要使用的触摸组件：

1 2 3 4 5

import React ,    . . .    PanResponder , //触摸必要的组件    . . . from 'react-native' ;

 

2. 声明：

1 2 3 4 5 6 7 8

constructor ( props ) super ( props ) ; this . state =                eventName : '' ,        pos : '' , ;      this . myPanResponder =

这里先声明了两个变量posX,posY用于显示坐标用，另外声明了一个 myPanResponder 用于后面的触摸事件。

 

3. 创建、设置与响应

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

componentWillMount ( )        this . myPanResponder = PanResponder . create (        //要求成为响应者：        onStartShouldSetPanResponder : ( evt , gestureState ) = > true ,        onStartShouldSetPanResponderCapture : ( evt , gestureState ) = > true ,        onMoveShouldSetPanResponder : ( evt , gestureState ) = > true ,        onMoveShouldSetPanResponderCapture : ( evt , gestureState ) = > true ,        onPanResponderTerminationRequest : ( evt , gestureState ) = > true ,             //响应对应事件后的处理:        onPanResponderGrant : ( evt , gestureState ) = >          this . state . eventName = '触摸开始' REACT NATIVE 系列教程之十三利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式 REACT NATIVE 系列教程之八不使用NAVIGATOR实现切换(页面)场景的两种形式（逻辑与MODAL） REACT NATIVE 系列教程之十三利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式 react-native 手势响应以及触摸事件的处理 React-Native：无法触发 Native UIButton 触摸事件 react-native的触摸事件应该如何动态生成？