React Native - Keyboard API使用详解(监听处理键盘事件)

时间:2024-03-15 20:25:50
当我们点击输入框时,手机的软键盘会自动弹出,以便用户进行输入。但有时我们想在键盘弹出时对页面布局做个调整,或者在程序中使用代码收起这个软键盘,这些借助 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)虚拟键盘打开后,除了点击键盘上的“完成”按钮外可以收起键盘外。点击输入框右侧的“收起键盘”按钮也可以达到同样效果。
     React Native - Keyboard API使用详解(监听处理键盘事件)        React Native - Keyboard API使用详解(监听处理键盘事件)

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