ReactNative之键盘Keyboard的弹出与消失示例

前端之家收集整理的这篇文章主要介绍了ReactNative之键盘Keyboard的弹出与消失示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在开发中经常遇到需要输入的地方,所以就学习了一下ReactNative键盘Keyboard的弹出与消失的方法,留个笔记。

今天我们来说下RN对键盘事件的支持

在React-native 的Component组件中有个Keyboard.

github地址如下:https://github.com/facebook/react-native/tree/770091f3c13f7c1bd77c50f979d89a774001fbf0/Libraries/Components/Keyboard

我们先来看下官方提供的例子,监听键盘的弹出与消失。Demo如下:

class Example extends Component {
componentWillMount () {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',this._keyboardDidHide);
}

componentWillUnmount () {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}

_keyboardDidShow () {
alert('Keyboard Shown');
}

_keyboardDidHide () {
alert('Keyboard Hidden');
}

render() {
return (
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
);
}
}

Keyboard支持的监听事件如下:

使用的时候需要测试下Android和iOS下监听的事件是否都ok。

踩坑如下:

android 对keyboardWillShow 监听不到。

同样,我们在源码里可以找到使键盘消失的函数

我们如果需要使用时,可以如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/37950.html

猜你在找的JavaScript相关文章