KeyboardKeyboard模块用来控制键盘相关的事件。用法示例Keyboard模块可以监听原生键盘事件以做出相应回应比如收回键盘。好的以下是关于 React Native 中Keyboard模块的详细说明。Keyboard模块是 React Native 提供的一个核心 API主要用于监听原生软键盘Keyboard的显示、隐藏等事件并提供控制键盘显示/隐藏的方法。这对于构建良好的用户输入体验至关重要例如在键盘弹出时调整页面布局或在点击页面空白处收起键盘。核心功能与方法Keyboard模块主要提供以下静态方法addListener(eventName, callback)作用为指定的键盘事件添加一个监听器。参数eventName事件名称可以是以下值之一keyboardWillShow软键盘即将显示时触发。keyboardDidShow软键盘显示完毕时触发。keyboardWillHide软键盘即将收起时触发。keyboardDidHide软键盘收起完毕时触发。keyboardWillChangeFrame软键盘的 frame位置和大小即将改变时触发例如设备旋转时。keyboardDidChangeFrame软键盘的 frame 改变完毕时触发。callback事件触发时执行的回调函数。该函数通常会接收一个包含键盘信息如高度、动画配置等的event对象作为参数。返回值返回一个监听器对象用于后续移除该监听器。removeListener(eventName, callback)作用移除指定事件的一个特定监听器。参数需要移除的事件名称和对应的回调函数。removeAllListeners(eventName)作用移除指定事件类型的所有监听器。参数事件名称如keyboardDidShow。dismiss()作用强制收起软键盘并取消当前输入框的焦点。这是实现“点击空白处收起键盘”功能的关键方法。事件对象详解当键盘事件触发时回调函数接收到的event对象通常包含以下重要信息具体字段可能因平台和事件类型而异endCoordinates一个包含键盘最终 frame 信息的对象通常包括screenX,screenY键盘在屏幕上的坐标。width,height键盘的宽度和高度。这是在keyboardDidShow等事件中获取键盘高度的主要途径。duration键盘动画的持续时间毫秒。easing键盘动画的缓动函数。使用示例下面是一个完整的使用示例展示了如何监听键盘事件并在点击页面空白处收起键盘。importReact,{Component}fromreact;import{View,TextInput,TouchableOpacity,Text,StyleSheet,Keyboard}fromreact-native;exportdefaultclassKeyboardDemoextendsComponent{constructor(props){super(props);this.state{text:,textarea:,keyboardHeight:0,// 用于存储键盘高度};// 定义事件回调函数this.keyboardDidShowHandlerthis.keyboardDidShowHandler.bind(this);this.keyboardDidHideHandlerthis.keyboardDidHideHandler.bind(this);}// 组件挂载时添加键盘事件监听componentDidMount(){this.keyboardDidShowListenerKeyboard.addListener(keyboardDidShow,this.keyboardDidShowHandler);this.keyboardDidHideListenerKeyboard.addListener(keyboardDidHide,this.keyboardDidHideHandler);}// 组件卸载时移除监听防止内存泄漏componentWillUnmount(){if(this.keyboardDidShowListener){this.keyboardDidShowListener.remove();}if(this.keyboardDidHideListener){this.keyboardDidHideListener.remove();}}// 键盘显示事件处理keyboardDidShowHandler(event){this.setState({keyboardHeight:event.endCoordinates.height});}// 键盘隐藏事件处理keyboardDidHideHandler(){this.setState({keyboardHeight:0});}// 点击空白处收起键盘dissmissKeyboard(){Keyboard.dismiss();}render(){return(View style{styles.container}{/* 使用 TouchableOpacity 包裹整个内容并设置 onPress 来收起键盘  --- ## 实际案例演示效果 这段React Native代码实现了一个键盘状态监听器其核心功能是实时监测设备键盘的显示和隐藏状态并通过用户界面直观地反馈当前状态。代码构建了一个响应式的交互环境能够准确捕捉用户与软键盘的互动行为。 在组件初始化阶段通过useState Hook创建了一个keyboardStatus状态变量初始值设置为Keyboard Hidden。这个状态变量专门用于记录和显示键盘的当前状态。组件的主体逻辑集中在useEffect Hook中这个副作用处理函数在组件挂载后立即执行负责建立键盘事件的监听机制。 js import React, {useState, useEffect} from react; import {Keyboard, Text, TextInput, StyleSheet} from react-native; import {SafeAreaView, SafeAreaProvider} from react-native-safe-area-context; const Example () { const [keyboardStatus, setKeyboardStatus] useState(Keyboard Hidden); useEffect(() { const showSubscription Keyboard.addListener(keyboardDidShow, () { setKeyboardStatus(Keyboard Shown); }); const hideSubscription Keyboard.addListener(keyboardDidHide, () { setKeyboardStatus(Keyboard Hidden); }); return () { showSubscription.remove(); hideSubscription.remove(); }; }, []); return ( SafeAreaProvider SafeAreaView style{style.container} TextInput style{style.input} placeholderClick here… onSubmitEditing{Keyboard.dismiss} / Text style{style.status}{keyboardStatus}/Text /SafeAreaView /SafeAreaProvider ); }; const style StyleSheet.create({ container: { flex: 1, padding: 36, }, input: { padding: 10, borderWidth: 0.5, borderRadius: 4, }, status: { padding: 16, textAlign: center, }, }); export default Example;useEffect内部创建了两个事件监听器一个监听keyboardDidShow事件当键盘从屏幕底部弹出时触发另一个监听keyboardDidHide事件当键盘收起时触发。这两个监听器分别对应不同的回调函数在键盘状态变化时更新界面显示。当键盘显示时showSubscription会执行其回调函数将keyboardStatus状态设置为Keyboard Shown。这个状态变化会触发组件的重新渲染从而更新屏幕上的文本内容。同样地当键盘隐藏时hideSubscription的回调函数会将状态恢复为Keyboard Hidden。这种双向的状态管理确保了界面与真实键盘状态的同步。在组件卸载时useEffect的清理函数会移除这两个事件监听器防止内存泄漏和无效的事件处理。这种设计体现了React组件生命周期管理的最佳实践。用户界面设计采用了SafeAreaView和SafeAreaProvider组件这些组件来自react-native-safe-area-context库它们的作用是确保内容显示在设备的安全区域内避免与刘海、状态栏或底部指示条发生重叠。TextInput组件是用户交互的核心入口它提供了一个文本输入框placeholder属性设置了占位文本Click here…。特别值得注意的是onSubmitEditing属性它绑定了Keyboard.dismiss方法这意味着当用户点击键盘上的完成按钮时键盘会自动收起提供了自然的交互体验。样式系统通过StyleSheet.create方法定义container样式配置了flex: 1属性使容器占据全屏同时设置了适当的内边距。input样式为文本输入框添加了边框和圆角效果status样式则为中心显示的键盘状态文本提供了合适的间距和对齐方式。打包接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle这样可以进行在开源鸿蒙OpenHarmony中进行使用。最后运行效果图如下显示
0 基础入门React Native鸿蒙跨平台开发：监听Keyboard模块原生键盘事件以做出相应回应
KeyboardKeyboard模块用来控制键盘相关的事件。用法示例Keyboard模块可以监听原生键盘事件以做出相应回应比如收回键盘。好的以下是关于 React Native 中Keyboard模块的详细说明。Keyboard模块是 React Native 提供的一个核心 API主要用于监听原生软键盘Keyboard的显示、隐藏等事件并提供控制键盘显示/隐藏的方法。这对于构建良好的用户输入体验至关重要例如在键盘弹出时调整页面布局或在点击页面空白处收起键盘。核心功能与方法Keyboard模块主要提供以下静态方法addListener(eventName, callback)作用为指定的键盘事件添加一个监听器。参数eventName事件名称可以是以下值之一keyboardWillShow软键盘即将显示时触发。keyboardDidShow软键盘显示完毕时触发。keyboardWillHide软键盘即将收起时触发。keyboardDidHide软键盘收起完毕时触发。keyboardWillChangeFrame软键盘的 frame位置和大小即将改变时触发例如设备旋转时。keyboardDidChangeFrame软键盘的 frame 改变完毕时触发。callback事件触发时执行的回调函数。该函数通常会接收一个包含键盘信息如高度、动画配置等的event对象作为参数。返回值返回一个监听器对象用于后续移除该监听器。removeListener(eventName, callback)作用移除指定事件的一个特定监听器。参数需要移除的事件名称和对应的回调函数。removeAllListeners(eventName)作用移除指定事件类型的所有监听器。参数事件名称如keyboardDidShow。dismiss()作用强制收起软键盘并取消当前输入框的焦点。这是实现“点击空白处收起键盘”功能的关键方法。事件对象详解当键盘事件触发时回调函数接收到的event对象通常包含以下重要信息具体字段可能因平台和事件类型而异endCoordinates一个包含键盘最终 frame 信息的对象通常包括screenX,screenY键盘在屏幕上的坐标。width,height键盘的宽度和高度。这是在keyboardDidShow等事件中获取键盘高度的主要途径。duration键盘动画的持续时间毫秒。easing键盘动画的缓动函数。使用示例下面是一个完整的使用示例展示了如何监听键盘事件并在点击页面空白处收起键盘。importReact,{Component}fromreact;import{View,TextInput,TouchableOpacity,Text,StyleSheet,Keyboard}fromreact-native;exportdefaultclassKeyboardDemoextendsComponent{constructor(props){super(props);this.state{text:,textarea:,keyboardHeight:0,// 用于存储键盘高度};// 定义事件回调函数this.keyboardDidShowHandlerthis.keyboardDidShowHandler.bind(this);this.keyboardDidHideHandlerthis.keyboardDidHideHandler.bind(this);}// 组件挂载时添加键盘事件监听componentDidMount(){this.keyboardDidShowListenerKeyboard.addListener(keyboardDidShow,this.keyboardDidShowHandler);this.keyboardDidHideListenerKeyboard.addListener(keyboardDidHide,this.keyboardDidHideHandler);}// 组件卸载时移除监听防止内存泄漏componentWillUnmount(){if(this.keyboardDidShowListener){this.keyboardDidShowListener.remove();}if(this.keyboardDidHideListener){this.keyboardDidHideListener.remove();}}// 键盘显示事件处理keyboardDidShowHandler(event){this.setState({keyboardHeight:event.endCoordinates.height});}// 键盘隐藏事件处理keyboardDidHideHandler(){this.setState({keyboardHeight:0});}// 点击空白处收起键盘dissmissKeyboard(){Keyboard.dismiss();}render(){return(View style{styles.container}{/* 使用 TouchableOpacity 包裹整个内容并设置 onPress 来收起键盘  --- ## 实际案例演示效果 这段React Native代码实现了一个键盘状态监听器其核心功能是实时监测设备键盘的显示和隐藏状态并通过用户界面直观地反馈当前状态。代码构建了一个响应式的交互环境能够准确捕捉用户与软键盘的互动行为。 在组件初始化阶段通过useState Hook创建了一个keyboardStatus状态变量初始值设置为Keyboard Hidden。这个状态变量专门用于记录和显示键盘的当前状态。组件的主体逻辑集中在useEffect Hook中这个副作用处理函数在组件挂载后立即执行负责建立键盘事件的监听机制。 js import React, {useState, useEffect} from react; import {Keyboard, Text, TextInput, StyleSheet} from react-native; import {SafeAreaView, SafeAreaProvider} from react-native-safe-area-context; const Example () { const [keyboardStatus, setKeyboardStatus] useState(Keyboard Hidden); useEffect(() { const showSubscription Keyboard.addListener(keyboardDidShow, () { setKeyboardStatus(Keyboard Shown); }); const hideSubscription Keyboard.addListener(keyboardDidHide, () { setKeyboardStatus(Keyboard Hidden); }); return () { showSubscription.remove(); hideSubscription.remove(); }; }, []); return ( SafeAreaProvider SafeAreaView style{style.container} TextInput style{style.input} placeholderClick here… onSubmitEditing{Keyboard.dismiss} / Text style{style.status}{keyboardStatus}/Text /SafeAreaView /SafeAreaProvider ); }; const style StyleSheet.create({ container: { flex: 1, padding: 36, }, input: { padding: 10, borderWidth: 0.5, borderRadius: 4, }, status: { padding: 16, textAlign: center, }, }); export default Example;useEffect内部创建了两个事件监听器一个监听keyboardDidShow事件当键盘从屏幕底部弹出时触发另一个监听keyboardDidHide事件当键盘收起时触发。这两个监听器分别对应不同的回调函数在键盘状态变化时更新界面显示。当键盘显示时showSubscription会执行其回调函数将keyboardStatus状态设置为Keyboard Shown。这个状态变化会触发组件的重新渲染从而更新屏幕上的文本内容。同样地当键盘隐藏时hideSubscription的回调函数会将状态恢复为Keyboard Hidden。这种双向的状态管理确保了界面与真实键盘状态的同步。在组件卸载时useEffect的清理函数会移除这两个事件监听器防止内存泄漏和无效的事件处理。这种设计体现了React组件生命周期管理的最佳实践。用户界面设计采用了SafeAreaView和SafeAreaProvider组件这些组件来自react-native-safe-area-context库它们的作用是确保内容显示在设备的安全区域内避免与刘海、状态栏或底部指示条发生重叠。TextInput组件是用户交互的核心入口它提供了一个文本输入框placeholder属性设置了占位文本Click here…。特别值得注意的是onSubmitEditing属性它绑定了Keyboard.dismiss方法这意味着当用户点击键盘上的完成按钮时键盘会自动收起提供了自然的交互体验。样式系统通过StyleSheet.create方法定义container样式配置了flex: 1属性使容器占据全屏同时设置了适当的内边距。input样式为文本输入框添加了边框和圆角效果status样式则为中心显示的键盘状态文本提供了合适的间距和对齐方式。打包接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle这样可以进行在开源鸿蒙OpenHarmony中进行使用。最后运行效果图如下显示
