# ReactNativeKeyboardListener

**Repository Path**: scenario-samples/react-native-keyboard-listener

## Basic Information

- **Project Name**: ReactNativeKeyboardListener
- **Description**: 在应用开发中，常常需要监听键盘的弹出和收起，以及获取键盘的高度，以便做出相应的布局调整。 本示例使用Keyboard.addListener实现监听键盘弹出、收起状态，以及获取键盘高度。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-01
- **Last Updated**: 2025-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 监听键盘状态和高度

## 场景介绍

在应用开发中，常常需要监听键盘的弹出和收起，以及获取键盘的高度，以便做出相应的布局调整。
本示例使用Keyboard.addListener实现监听键盘弹出、收起状态，以及获取键盘高度。

## 效果预览

<img src="screenshots/KeyboardListener.gif" width="200">

## 实现思路

1. 设置键盘状态变量。

```
const [keyboardStatus, setKeyboardStatus] = useState('hidden');
const [keyboardHeight, setKeyboardHeight] = useState(0);
```

2. 添加键盘事件监听器。

```
Keyboard.addListener('keyboardWillShow', () => {
  setKeyboardStatus('will show');
}),
Keyboard.addListener('keyboardDidShow', e => {
  setKeyboardStatus('visible');
  setKeyboardHeight(e.endCoordinates.height);
}),
Keyboard.addListener('keyboardWillHide', () => {
  setKeyboardStatus('will hide');
}),
Keyboard.addListener('keyboardDidHide', () => {
  setKeyboardStatus('hidden');
  setKeyboardHeight(0);
}),
```

## 约束与限制

- 本示例支持API Version 17 Release及以上版本。
- 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。
- 本示例使用0.72.86版本RNOH

## 工程目录

```
ReactNativeKeyboardListener                      // RN工程
├──harmony                                       // harmony工程
│  ├──entry/src/main/cpp                         // native相关配置
│  │  ├──generated                               // codegen自动生成的桥接代码
│  │  ├──CMakeLists.txt
│  │  └──PackageProvider.cpp
│  ├──entry/src/main/ets
│  │  ├──entryability
│  │  │  └──EntryAbility.ets
│  │  ├──pages
│  │  │  └──Index.ets                            // harmony侧入口
│  │  └──RNPackagesFactory.ets
│  └──entry/src/main/resources/rawfile           // bundle、静态资源存放目录
├──App.tsx                                       // 键盘监听实现
├──index.js                                      // 入口文件
├──metro.config.js                               // 打包配置
```
## 参考文档
[Keyboard](https://reactnative.cn/docs/next/keyboard)

[RNOH使用文档](https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md)