当我们点击输入框时，手机的软键盘会自动弹出，以便用户进行输入。但有时我们想在键盘弹出时对页面布局做个调整，或者在程序中使用代码收起这个软键盘，这些借助 React Native 框架提供的Keyboard API 就可以实现。
一、Keyboard API 提供的方法
Keyboard API 提供如下的静态函数供开发者使用。
1，addListener(eventName, callback)
（1）这个函数用来加载一个指定事件的事件监听器，函数中的 eventName 可以是如下值：
- keyboardWillShow：软键盘将要显示
- keyboardDidShow：软键盘显示完毕
- keyboardWillHide：软键盘将要收起
- keyboardDidHide：软键盘收起完毕
- keyboardWillChangeFrame：软件盘的 frame 将要改变
- keyboardDidChangeFrame：软件盘的 frame 改变完毕
（2）这个函数返回一个对象。我们可以保存这个对象，在需要释放事件监听器时，调用这个对象的 remove 方法。
2，removeListener(eventName, callback)
这个函数用来释放一个特定的键盘事件监听器。
3，removeAllListener(eventName)
这个函数用来释放一个指定键盘事件的所有事件监听器。
4，dissmiss()
这个方法让操作系统收起软键盘。
二、event 参数值
所有的键盘事件处理函数都能收到一个 event 参数，不过在不同平台下 event 参数可以取到的值不太一样。
1，Android 平台可以取到的值
- event.endCoordinates.screenX
- event.endCoordinates.screenY
- event.endCoordinates.width
- event.endCoordinates.height
2，iOS 平台可以取到的值
- event.easing：这个值始终是 keyboard
- evnet.duration：记录软键盘弹出动画的持续事件，单位是毫秒
- event.startCoordinates.screenX
- event.startCoordinates.screenY
- event.startCoordinates.width
- event.startCoordinates.height
- event.endCoordinates.screenX
- event.endCoordinates.screenY
- event.endCoordinates.width
- event.endCoordinates.height
三、使用样例
1，效果图
（1）在组件加载时就开始监听虚拟键盘的弹出/隐藏事件，一旦虚拟键盘状态发生变化，输入框下方便会实时显示当前状态。
（2）虚拟键盘打开后，除了点击键盘上的“完成”按钮外可以收起键盘外。点击输入框右侧的“收起键盘”按钮也可以达到同样效果。
2，样例代码
|
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import
React, { Component } from 'react';
import
{
AppRegistry,
StyleSheet,
TextInput,
View,
Text,
Keyboard
}
from 'react-native';
class
Main extends Component {
constructor(props){
super(props);
this.keyboardDidShowListener
= null;
this.keyboardDidHideListener
= null;
this.state
= { KeyboardShown: false};
}
componentWillMount()
{
//监听键盘弹出事件
this.keyboardDidShowListener
= Keyboard.addListener('keyboardDidShow',
this.keyboardDidShowHandler.bind(this));
//监听键盘隐藏事件
this.keyboardDidHideListener
= Keyboard.addListener('keyboardDidHide',
this.keyboardDidHideHandler.bind(this));
}
componentWillUnmount()
{
//卸载键盘弹出事件监听
if(this.keyboardDidShowListener
!= null)
{
this.keyboardDidShowListener.remove();
}
//卸载键盘隐藏事件监听
if(this.keyboardDidHideListener
!= null)
{
this.keyboardDidHideListener.remove();
}
}
//键盘弹出事件响应
keyboardDidShowHandler(event)
{
this.setState({KeyboardShown: true});
console.log(event.endCoordinates.height);
}
//键盘隐藏事件响应
keyboardDidHideHandler(event)
{
this.setState({KeyboardShown: false});
}
//强制隐藏键盘
dissmissKeyboard()
{
Keyboard.dismiss();
console.log("输入框当前焦点状态：" + this.refs.bottomInput.isFocused());
}
render()
{
return (
<View
style={[styles.container]}>
<View
style={[styles.flexDirection, styles.inputHeight]}>
<TextInput
style={styles.textInputStyle} ref="bottomInput" />
<Text
style={styles.buttonStyle}
onPress={this.dissmissKeyboard.bind(this)}>
收起键盘
</Text>
</View>
<Text>
当前键盘状态：{this.state.KeyboardShown
? "打开" : "关闭"}
</Text>
</View>
);
}
}
const
styles = StyleSheet.create({
container:{
flex:1,
paddingTop:15
},
flexDirection:{
flexDirection:'row'
},
inputHeight:{
height:35,
alignItems: 'center'
},
textInputStyle:{
flex:1,
height:35,
fontSize:18,
},
buttonStyle:{
fontSize:20,
color:'white',
width:100,
textAlign:'center',
backgroundColor:'#4CA300'
},
});
AppRegistry.registerComponent('HelloWorld',
() => Main);
|
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1761.html