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

4,182 阅读2分钟

键盘弹出

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函数。

相关扩展: