ReactNative 之 Handling Touches

---

用户主要通过触摸操作移动应用程序。他们可以使用手势的组合,比如点击一个按钮,地图上的滚动列表,或缩放。

React Native提供了组件来处理常见的手势,比如每次点击、滑动,以及综合的手势响应器系统,以便识别更高级的手势。

Tappable组件

当你想捕获点击手势，您可以使用“Touchable”组件。他们把一个函数通过onPress props（调用触摸开始和结束的范围内组件）。
例如：

class MyButton extends Component {  _onPressButton() {    console.log("You tapped the button!");  }  render() {    return (      <TouchableHighlight onPress={this._onPressButton}>        <Text>Button</Text>      </TouchableHighlight>    );  }}

Tappable组件应该提供feedback（反馈）,来展示用户处理接触,以及当他们举起手指会发生什么。用户也应该可以取消一个点击拽着自己的手指离开。

你使用哪个组件将取决于你想要什么样的feedback:

• 一般来说,你可以在任何地方使用TouchableHighlight任何地方你可以使用一个按钮或链接网站。视图的背景将是黑暗的,当用户按下按钮。
• 你可能会考虑使用TouchableNativeFeedback在Android上显示墨水表面反应的涟漪,响应用户的触摸。
• TouchableOpacity可用于提供反馈feedback通过减少按钮的事件不传递,允许背景可以看到当用户压下来。
• 如果你需要处理一个点击手势但你不想要任何反馈显示,使用TouchableWithoutFeedback。

长按（Long press）

在某些情况下,您可能想要检测当用户按下,并且持续一段时间不松开。这些长按可以通过传递一个函数onLongPressprops处理的、上面列出的任何可触摸组件。

滚动List列表、左右滑动行视图

许多移动应用程序的常见模式是可滚动列表项。用户与这些使用平移或划动手势交互。滚动视图组件显示可以使用这些手势滚动的视图列表,。

滚动视图可以垂直或水平滚动,可以配置为允许翻阅视图使用划动手势使用pagingEnabled 属性。视图间的水平滑动也可以在Android上使用ViewPagerAndroid component 实现 。

ListView 是一种特殊的滚动视图,最适合于显示长纵向项目的列表。它还可以显示页眉和页脚部分,类似于uitableview iOS。

缩放

单个视图的滚动视图可以用来允许用户放大内容。设置maximumZoomScale和minimumZoomScale属性、用户将能够使用手势放大和缩小。

处理额外的手势

如果你想允许用户拖拽一个视图在屏幕上,或您希望实现自己的自定义pan/拖动手势,看看PanResponder API或手势应答系统文档。

---

关注公众号：

                       

                                              更多精彩文章等你来！！！

---

[1]:参考文献 http://facebook.github.io/react-native/docs/handling-touches.html