非常教程

React native参考手册

指南 | Guides

Gesture Responder System

手势响应器系统管理您的应用中手势的生命周期。触摸可以经历几个阶段,因为应用程序确定用户的意图是什么。例如,应用程序需要确定触摸是否滚动,滑动窗口小部件或点击。这甚至可以在触摸的持续时间内改变。也可以有多个同时触摸。

需要触摸响应器系统来允许组件协商这些触摸交互,而不需要关于其父组件或子组件的额外知识。这个系统的实施ResponderEventPlugin.js,其中包含更多的细节和文件。

最佳实践

为了让您的应用感觉棒极了,每个动作都应该具有以下属性:

  • 反馈/突出显示 - 向用户显示处理触摸的方式,以及释放手势时会发生什么
  • 取消能力 - 当进行一个动作时,用户应该能够通过将他们的手指拖走来中止它

这些功能使用户在使用应用程序时更加舒适,因为它可以让人们进行实验和互动,而不用担心犯错误。

TouchableHighlight和Touchable *

响应者系统使用起来可能很复杂。所以我们提供了一个抽象的Touchable应用程序,用于应该“可点击”的事物。这使用响应者系统,并允许您以声明方式轻松配置点击交互。使用TouchableHighlight任何地方你可以使用一个按钮或网页链接。

响应者生命周期

视图可以通过实施正确的协商方法成为触摸响应者。有两种方法可以询问视图是否想成为响应者:

  • View.props.onStartShouldSetResponder: (evt) => true, - 此视图是否希望成为触摸开始时的响应者?
  • View.props.onMoveShouldSetResponder: (evt) => true, - 当视图不是响应者时,为视图上的每次触摸移动调用:该视图是否要“声明”触摸响应?

如果视图返回true并尝试成为响应者,则会发生以下情况之一:

  • View.props.onResponderGrant: (evt) => {} - 视图正在响应触摸事件。这是突出显示用户正在发生的事情的时候
  • View.props.onResponderReject: (evt) => {} - 其他人现在是响应者,不会释放它

如果视图正在响应,则可以调用以下处理程序:

  • View.props.onResponderMove: (evt) => {} - 用户正在移动他们的手指
  • View.props.onResponderRelease: (evt) => {} - 在触摸结束时触发,即“touchUp”
  • View.props.onResponderTerminationRequest: (evt) => true - 其他人想成为响应者。这个视图应该释放响应者吗?返回true允许发布
  • View.props.onResponderTerminate: (evt) => {} - 响应者已被从视图中删除。呼叫之后可能会被其他视图占用onResponderTerminationRequest,或者操作系统可能会在没有询问的情况下采取其他操作(与iOS上的控制中心/通知中心发生)

evt 是一种具有以下形式的合成触摸事件:

  • nativeEvent
    • changedTouches - 自上次事件以来已更改的所有触摸事件的数组
    • identifier - 触摸的ID
    • locationX - 触摸的X位置,相对于元素
    • locationY - 触摸的Y位置,相对于元素
    • pageX - 触摸的X位置,相对于根元素
    • pageY - 触摸的Y位置,相对于根元素
    • target - 接收触摸事件的元素的节点ID
    • timestamp - 触摸的时间标识符,用于速度计算
    • touches - 屏幕上所有当前触摸的数组

捕获ShouldSet处理程序

onStartShouldSetResponderonMoveShouldSetResponder以鼓泡模式调用,其中最深的节点首先被调用。这意味着当多个视图对于*ShouldSetResponder处理程序返回true时,最深的组件将成为响应者。这在大多数情况下是可取的,因为它确保所有控件和按钮都可用。

但是,有时家长会希望确保它成为响应者。这可以通过使用捕获阶段来处理。响应者系统从最深的组件中冒出来之前,它会进行捕获阶段,触发on*ShouldSetResponderCapture。因此,如果父视图想要防止孩子在触摸开始时成为响应者,则应该有一个onStartShouldSetResponderCapture返回true 的处理程序。

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

PanResponder

对于更高级别的手势解释,请查看PanResponder。

React native

React Native 是一个 JavaScript 的框架,用来撰写实时的、可原生呈现 iOS 和 Android 的应用。

主页 https://facebook.github.io/react-native/
源码 https://github.com/facebook/react-native
发布版本 0.49

React native目录

1.开始 | Getting Started
2.指南 | Guides
3.APIs
4.组件:ActivityIndicator | Components: ActivityIndicator
5.组件:按钮 | Components: Button
6.组件:CheckBox | Components: CheckBox
7.组件:DatePickerIOS | Components: DatePickerIOS
8.组件:DrawerLayoutAndroid | Components: DrawerLayoutAndroid
9.组件:FlatList | Components: FlatList
10.组件:图像 | Components: Image
11.组件:KeyboardAvoidingView | Components: KeyboardAvoidingView
12.Components: ListView
13.Components: MaskedViewIOS
14.Components: Modal
15.Components: NavigatorIOS
16.Components: Picker
17.Components: PickerIOS
18.Components: ProgressBarAndroid
19.Components: ProgressViewIOS
20.Components: RefreshControl
21.Components: ScrollView
22.Components: SectionList
23.Components: SegmentedControlIOS
24.Components: Slider
25.Components: SnapshotViewIOS
26.Components: StatusBar
27.Components: Switch
28.Components: TabBarIOS
29.Components: TabBarIOS.Item
30.Components: Text
31.Components: TextInput
32.Components: ToolbarAndroid
33.Components: TouchableHighlight
34.Components: TouchableNativeFeedback
35.Components: TouchableOpacity
36.Components: TouchableWithoutFeedback
37.Components: View
38.Components: ViewPagerAndroid
39.Components: VirtualizedList
40.Components: WebView
41.创建 | Contributing
42.指南(Android) | Guides (Android)
43.指南(IOS) | Guides (iOS)
44.其他 | Miscellaneous