本文是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=
'触摸开始'
;
this
.forceUpdate();
},
onPanResponderMove: (evt, gestureState) => {
var
_pos =
'x:'
+ gestureState.moveX +
',y:'
+ gestureState.moveY;
this
.setState( {eventName:
'移动'
,pos : _pos} );
},
onPanResponderRelease: (evt, gestureState) => {
this
.setState( {eventName:
'抬手'
} );
},
onPanResponderTerminate: (evt, gestureState) => {
this
.setState( {eventName:
'另一个组件已经成为了新的响应者'
} )
},
});
}
|
以上代码分为3部分，先创建，然后对需要追踪的事件进行设置响应，最后重写响应的事件进行处理即可。
需要注意的：绑定到componentDidMount的话可能会失效，需要在componentWillMount处预先创建手势响应器
4. 为要响应的View进行设置
| 1 |
{...this.myPanResponder.panHandlers} |
5. 完善Render函数：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return
(
<View style={styles.himiViewStyle}
{...
this
.myPanResponder.panHandlers}
>
<Text style={styles.himiTextStyle}>Himi React Native 教程</Text>
<View style={styles.container}>
<Text style={styles.text}>{
this
.state.eventName}</Text>
<Text style={styles.text}>{
this
.state.pos}</Text>
</View>
</View>
)}
|
6.用到的布局和样式：
|
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
|
var
styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:
'row'
,
justifyContent:
'center'
,
alignItems:
'center'
,
backgroundColor:
'#F5FCFF'
,
},
text: {
color:
'#f00'
,
fontSize:30,
},
himiViewStyle:{
flex: 1,
flexDirection:
'column'
,
justifyContent:
'center'
,
alignItems:
'center'
,
backgroundColor:
'#F5FCFF'
,
},
himiTextStyle:{
color:
'#f00'
,
fontSize:30,
marginTop:70,
},
});
|
效果如下：（点击查看动态效果）
如上是第一种形式，下面我们简单说下如何使用第二种形式：
|
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
componentWillMount() {
this
.myPanResponder = PanResponder.create({
//*********************第二种触摸的形式***************************
//类似 shouldComponentUpdate，监听手势开始按下的事件，返回一个boolean决定是否启用当前手势响应器
onStartShouldSetPanResponder:
this
._handleStartShouldSetPanResponder.bind(
this
),
//监听手势移动的事件，返回一个boolean决定是否启用当前手势响应器
onMoveShouldSetPanResponder:
this
._handleMoveShouldSetPanResponder.bind(
this
),
//手势开始处理
onPanResponderGrant:
this
._handlePanResponderGrant.bind(
this
),
//手势移动时的处理
onPanResponderMove:
this
._handlePanResponderMove.bind(
this
),
//用户放开所有触点时的处理
onPanResponderRelease:
this
._handlePanResponderRelease.bind(
this
),
//另一个组件成了手势响应器时（当前组件手势结束）的处理
onPanResponderTerminate:
this
._handlePanResponderEnd.bind(
this
)
});
}
_handleStartShouldSetPanResponder(e, gestureState) {
//返回一个boolean决定是否启用当前手势响应器
return
true
;
}
_handleMoveShouldSetPanResponder(e, gestureState) {
return
true
;
}
_handlePanResponderGrant(e, gestureState) {
this
.setState({
eventName :
'Start'
})
}
_handlePanResponderRelease(e, gestureState) {
this
.setState({
eventName :
'End'
})
}
_handlePanResponderMove(e, gestureState) {
var
_pos =
'x:'
+ gestureState.moveX +
',y:'
+ gestureState.moveY;
this
.setState({
eventName :
'Move:'
,
pos : _pos
})
}
_handlePanResponderEnd(e, gestureState) {
this
.setState({
eventName :
'另一个组件成了手势响应器时（当前组件触摸结束）的处理'
})
}
|
第二种形式就是将触摸响应绑定到我们自定义的函数，其他没有基本没区别。改动只有两点：
1. 绑定时修改成将触摸事件的回调绑定到我们自定义函数。
2. 添加每个响应的自定义函数。
效果如下：（点击查看动态效果）
二：四种 Touchable 触摸组件
Touchable 一共有四种形式：
TouchableHighlight: 当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。
TouchableNativeFeedback:(仅限Android平台) 在Android设备上，这个组件利用原生状态来渲染触摸的反馈。
TouchableOpacity: 当按下的时候，封装的视图的不透明度会降低。这个过程并不会真正改变视图层级，大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用。
TouchableWithoutFeedback: 除非你有一个很好的理由，否则不要用这个组件。所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈（然而本组件没有任何视觉反馈）,仍会触发触摸事件的响应
1. 添加Touchable的四种组件
|
1
2
3
4
5
6
7
8
9
10
|
import React, {
...
Image,
Alert,
TouchableHighlight,
TouchableNativeFeedback,
TouchableOpacity,
TouchableWithoutFeedback,
...
} from
'react-native'
;
|
Himi这里还添加了Image和Alert两个组件：
Image 是图片组件，这里是为了测试效果，将Touchable发生在图片
Alert 弹窗提示组件，是为了通过弹窗，更好的展示出事件响应效果
2. 在Render添加如下：
|
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
27
28
29
30
31
32
|
<View style={styles.container}>
<TouchableHighlight
underlayColor=
'#4169e1'
onPress={
this
.test}
>
<Image
source={require(
'./res/himi.png'
)}
style={{width: 70, height: 70}}
/>
</TouchableHighlight>
<TouchableOpacity
activeOpacity={0.5}
onPress={()=>{Alert.alert(
'Himi'
,
' TouchableOpacity '
);} }
>
<Image
source={require(
'./res/himi.png'
)}
style={{width: 70, height: 70}}
/>
</TouchableOpacity>
<TouchableWithoutFeedback
underlayColor=
'#4169e1'
activeOpacity={0.5}
onPress={()=>{Alert.alert(
'Himi'
,
' TouchableWithoutFeedback '
);} }
>
<Image
source={require(
'./res/himi.png'
)}
style={{width: 70, height: 70}}
/>
</TouchableWithoutFeedback>
</View>
|
由于Himi写博客时在Mac下，那么如下我们来创建除仅限Android的TouchableNativeFeedback之外的三种形式。
根据反馈的形式，大家可以自行设置其透明度、背景色、样式等。
效果图如下：（点击查看动态图）
注意：Touchable 组件系列都只能包含一个子组件，也就是说你想多个，可以嵌套View组件来实现。如:
|
1
2
3
4
5
6
|
<TouchableHighlight >
<View>
<Text> t1 </Text>
<Text> t2 </Text>
</View>
</TouchableHighlight>
|
