ReactNative-键盘弹出或关闭操作简析

[Pengxi92]

键盘弹出

1.TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。在TextInput获得焦点时，键盘会弹出。

键盘关闭

1.调用键盘关闭API

声明变量:

var dismissKeyboard = require('dismissKeyboard');

在点击事件中调用:

dismissKeyboard();

2.scrollview中操作键盘

ScrollView控件中有个属性，keyboardShouldPersistTaps。

先看下官网的讲解：

• 版本0.43之前：bool(false, true)

  • false（默认值），在软键盘激活之后，点击焦点文本输入框以外的地方，键盘就会隐藏。
  • true，滚动视图不会响应点击操作，并且键盘不会自动消失。

• 版本0.43之后：
  enum('always', 'never', 'handled', false, true)

  • 'never'（默认值），点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
  • 'always'，键盘不会自动收起，ScrollView也不会捕捉点击事件，但子组件可以捕获。
  • 'handled'，当点击事件被子组件捕获时，键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。
  • false，已过期，请使用'never'代替。
  • true，已过期，请使用'always'代替。

键盘监听

1.Keyboard

Keyboard组件可以监听原生键盘事件以做出相应回应，比如收回键盘。

我们看下官方的示例：

this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);

• static addListener(nativeEvent, jsFunction)

  addListener用于注册一个JavaScript函数来监听处理原生键盘通知事件。此方法会返回监听函数的引用。

  @param {string} nativeEvent nativeEvent参数用来指明要监听的事件，具体有以下几种:

  keyboardWillShow // 键盘弹出前
  keyboardDidShow // 键盘弹出后
  keyboardWillHide // 键盘关闭前
  keyboardDidHide // 键盘关闭前
  keyboardWillChangeFrame // 键盘改变前
  keyboardDidChangeFrame // 键盘改变后

  注意：如果你把android:windowSoftInputMode设置为adjustResize或是adjustNothing，则在Android上只有keyboardDidShow和keyboardDidHide事件有效。

  @param {function} jsFunction 事件触发时调用的js函数。

相关扩展：

• React Native 中切换TextInput保持键盘展开
• React Native 应用在键盘弹出时优雅地响应