《React-Native系列》39、 ReactNative之键盘Keyboard
来源:互联网 发布:奢侈品复刻1:1淘宝 编辑:程序博客网 时间:2024/05/17 03:22
今天我们来说下RN对键盘事件的支持。
在react-native 的Component组件中有个Keyboard.
github地址如下:https://github.com/facebook/react-native/tree/770091f3c13f7c1bd77c50f979d89a774001fbf0/Libraries/Components/Keyboard我们先来看下官方提供的例子,监听键盘的弹出与消失。Demo如下:
import React, { Component } from 'react';import { Keyboard, TextInput } from 'react-native';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支持的监听事件如下:
@param {string} nativeEvent The `nativeEvent` is the string that identifies the event you're listening for. This can be any of the following:- `keyboardWillShow`- `keyboardDidShow`- `keyboardWillHide`- `keyboardDidHide`- `keyboardWillChangeFrame`- `keyboardDidChangeFrame`
使用的时候需要测试下Android和iOS下监听的事件是否都ok。
踩坑如下:
Android 对keyboardWillShow 监听不到。
同样,我们在源码里可以找到使键盘消失的函数
/** * Dismisses the active keyboard and removes focus. */ dismiss () { dismissKeyboard(); }
我们如果需要使用时,可以如下:
const dismissKeyboard = require('dismissKeyboard’);dismissKeyboard();
0 0
- 《React-Native系列》39、 ReactNative之键盘Keyboard
- 《React-Native系列》39、 ReactNative之bundle文件瘦身
- React Native 键盘KeyBoard问题
- 《React-Native系列》40、 ReactNative之bundle文件瘦身
- 《React-Native系列》36、 ReactNative地图组件
- 《React-Native系列》36、 ReactNative地图组件
- 《ReactNative》之sqlite(react-native-sqlite-storage)
- React-Native解决键盘遮挡问题(Keyboard遮挡问题)
- React-Native解决键盘遮挡问题(Keyboard遮挡问题)
- ReactNative系列之十二图标组件react-native-vector-icons的使用
- 【ReactNative】react-native 布局
- 【ReactNative】react-native 布局
- 《React-Native系列》26、 ReactNative实现图片上传功能
- 《React-Native系列》34、 ReactNative的那些坑
- 《React-Native系列》38、 ReactNative混合组件封装
- 《React-Native系列》26、 ReactNative实现图片上传功能
- 《React-Native系列》34、 ReactNative的那些坑
- 《React-Native系列》38、 ReactNative混合组件封装
- 在导航栏上添加控件和UITextField改变光标颜色和改变站位符颜色
- Kalman滤波器从原理到实现
- 双向BFS
- s
- underscore 函数去抖的实现 #21
- 《React-Native系列》39、 ReactNative之键盘Keyboard
- 移动应用“好”的本质在空白状态上体现
- java代码开发细节(根据Sonar提示的问题总结归纳的)
- centos7安装nginx
- VMware与宿敌Amazon一笑泯恩仇:重新定义混合云?
- 关于内部类的个人总结
- okhttp-utils的封装之okhttp的使用
- Spring MVC 入门总结
- 对象存入session中时,未序列化报错的问题