Keyboard
Keyboard模块用来控制键盘相关的事件。
用法示例
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}from'react';import{View,TextInput,TouchableOpacity,Text,StyleSheet,Keyboard}from'react-native';exportdefaultclassKeyboardDemoextendsComponent{constructor(props){super(props);this.state={text:'',textarea:'',keyboardHeight:0,// 用于存储键盘高度};// 定义事件回调函数this.keyboardDidShowHandler=this.keyboardDidShowHandler.bind(this);this.keyboardDidHideHandler=this.keyboardDidHideHandler.bind(this);}// 组件挂载时添加键盘事件监听componentDidMount(){this.keyboardDidShowListener=Keyboard.addListener('keyboardDidShow',this.keyboardDidShowHandler);this.keyboardDidHideListener=Keyboard.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} placeholder="Click 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中进行使用。
最后运行效果图如下显示：
 agent和组件)