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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

当我们点击输入框时，手机的软键盘会自动弹出，以便用户进行输入。但有时我们想在键盘弹出时对页面布局做个调整，或者在程序中使用代码收起这个软键盘，这些借助 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

以上是 React Native - Keyboard API使用详解（监听处理键盘事件） 的全部内容， 来源链接： utcz.com/z/382538.html

回到顶部