# @flyerhq/react-native-keyboard-accessory-view 中文文档
规范地址：https://npmcn.com/package/%40flyerhq/react-native-keyboard-accessory-view/
版本：2\.4\.0
npm 元数据更新时间：2022-05-07T11:44:45.434Z
中文译文更新时间：2026-11-15T02:51:36.306Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40flyerhq/react-native-keyboard-accessory-view
原文对照：https://npmcn.com/package/%40flyerhq/react-native-keyboard-accessory-view/?lang=original
项目主页：https://github.com/flyerhq/react-native-keyboard-accessory-view#readme
弃用说明：Package no longer supported\. Contact Support at https://www\.npmjs\.com/support for more info\.
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：27.1 kB，21 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native \*，react-native-safe-area-context \*
- 首次发布：2020-06-01T21:09:18.862Z
- 最新版本发布：2022-01-27T20:40:42.829Z
- 近 30 天下载量：6825（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：30（近 12 个月 0 个）
## 中文简介
您的 React Industrial app 的键盘附属视图( sticky) 。 支持在iOS上进行交互删除.
## 安装
```sh
npm install @flyerhq/react-native-keyboard-accessory-view
```
也可以使用：`pnpm add @flyerhq/react-native-keyboard-accessory-view`、`yarn add @flyerhq/react-native-keyboard-accessory-view`、`bun add @flyerhq/react-native-keyboard-accessory-view`
## README
# 反应原生键盘附属视图
[](https://www.npmjs.com/package/@flyerhq/react-native-keyboard-accessory-view) [](https://github.com/flyerhq/react-native-keyboard-accessory-view/actions?query=workflow%3Abuild) [](https://codeclimate.com/github/flyerhq/react-native-keyboard-accessory-view/maintainability) [](https://codeclimate.com/github/flyerhq/react-native-keyboard-accessory-view/test_coverage) [](https://github.com/plantain-00/type-coverage)
您的 React Industrial app 的键盘附属视图( sticky) 。 支持在iOS上进行互动解职,尊重安全区域并同时在iOS和Android上进行肖像和景观工作.
## 开始
这个库取决于 `react-native-safe-area-context`。如果您使用 [反应导航](https://reactnavigation.org/) 你可能已经在你的依赖, 所以你可以走了。 如果没有,请遵照指示 [这里](https://github.com/th3rdwave/react-native-safe-area-context) 要安装它。 然后运行 :
```sh
yarn add @flyerhq/react-native-keyboard-accessory-view
```
## 使用量
```ts
import { KeyboardAccessoryView } from '@flyerhq/react-native-keyboard-accessory-view'
import { GestureResponderHandlers } from 'react-native'
// ...
const renderScrollable = (panHandlers: GestureResponderHandlers) => (
// Can be anything scrollable
)
// ...
return (
// Your accessory view
)
```
### 处理错误抵消
有时,当您使用标签栏或类似组件时,附属视图不能正确工作. 为了解决这个问题,需要使用下个道具的组合: `contentContainerStyle`, (中文(简体) ), `contentOffsetKeyboardClosed`, (中文(简体) ), `contentOffsetKeyboardOpened` 财务报告和审定财务报表 `spaceBetweenKeyboardAndAccessoryView`。 。 。 .
首先,你需要决定是否需要在底部需要这个额外的安全区域比值(正如你可以看到键盘打开和关闭时附属视图的大小不同,这是因为在关闭时,安全区域下比值被添加). 例如,如果您有标签栏, 您很可能不需要这个边距, 因为安全是标签栏已经占用的区域 。 要删除此样式 : `contentContainerStyle={{ marginBottom: 0 }}`。 。 。 .
第一步完成后,需要检查是否在附属视图和键盘之间有空格,后者何时被打开. 如果你这样做,将抵消 `spaceBetweenKeyboardAndAccessoryView` 道具 (英语). 通常,它可以根据底部安全区域来计算 [反应-内在-安全区域-文本](https://github.com/th3rdwave/react-native-safe-area-context) 例如,标签栏的高度.
最后,如果附属视图以上内容正确抵消,则验证,如果不是,可以使用 `contentOffsetKeyboardClosed` 财务报告和审定财务报表 `contentOffsetKeyboardOpened` 道具来. 有时抵消对一个键盘状态是正确的,如果是这样,请使用其中一个道具. 和现在一样 `spaceBetweenKeyboardAndAccessoryView` 例如,道具、冲抵是根据底部安全区设置和/或标签栏高度计算的.
## 道具
### `KeyboardAccessoryView`
- `renderScrollable` (要求) - 接受 `ReactNode`。您的可滚动组件.
- `style` (可选) - 接受 [查看样式道具](https://reactnative.dev/docs/view-style-props)。用于样式视图,其中既包括内容容器,也包括安全区域设置。 将设定一个常用大小写 `backgroundColor` 因此,内容容器和安全区域是相匹配的颜色.
- `contentContainerStyle` (可选) - 接受 [查看样式道具](https://reactnative.dev/docs/view-style-props)。用于设置内容容器的样式,但不用于设置安全区域.
- `contentOffsetKeyboardClosed` (可选) - 接受一个数字。 键盘打开时用于调整内容偏移. 更多信息 [这里](https://npmcn.com/package/%40flyerhq/react-native-keyboard-accessory-view/#readme-handling-wrong-offsets)。 。 。 .
- `contentOffsetKeyboardOpened` (可选) - 接受一个数字。 键盘关闭时用于调整内容偏移. 更多信息 [这里](https://npmcn.com/package/%40flyerhq/react-native-keyboard-accessory-view/#readme-handling-wrong-offsets)。 。 。 .
- `renderBackground` (可选) - 接受返回React节点的函数 。 当您想要将自定义节点作为背景时(如:. `` ) (中文(简体) ). 记住绝对位置.
- `scrollableContainerStyle` (可选) - 接受 [查看样式道具](https://reactnative.dev/docs/view-style-props)。用于将可滚动组件包裹在容器中的样式 `renderScrollable`。如果您想要滚动来填充整个容器,则尝试通过 `flex: 1` 在这里.
- `spaceBetweenKeyboardAndAccessoryView` (可选) - 接受一个数字。 用于调整从旁视图到键盘之间的空间,当后者打开时. 更多信息 [这里](https://npmcn.com/package/%40flyerhq/react-native-keyboard-accessory-view/#readme-handling-wrong-offsets)。 。 。 .
- `useListenersOnAndroid` (可选) - 接受布尔值 。 默认情况下,Android OS会在键盘打开后调整窗口大小并自动将附属视图置于键盘上方. 这种行为可以被修正,因此如果出于某种原因从属视图不出现在键盘上方,尝试设置这个道具,它会根据键盘收听器来计算内容高度. 对iOS没有影响.
## 许可证
[麻省理工学院](https://npmcn.com/package/%40flyerhq/react-native-keyboard-accessory-view/LICENSE)
## 常见问题
### @flyerhq/react-native-keyboard-accessory-view 是什么？
您的 React Industrial app 的键盘附属视图\( sticky\) 。 支持在iOS上进行交互删除\.注意：该包已被作者标记为弃用——Package no longer supported\. Contact Support at https://www\.npmjs\.com/support for more info\.
### 如何安装 @flyerhq/react-native-keyboard-accessory-view？
在项目目录运行 npm install @flyerhq/react-native-keyboard-accessory-view，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）、react-native-safe-area-context（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @flyerhq/react-native-keyboard-accessory-view 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @flyerhq/react-native-keyboard-accessory-view 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @flyerhq/react-native-keyboard-accessory-view 可以商用吗？
@flyerhq/react-native-keyboard-accessory-view 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @flyerhq/react-native-keyboard-accessory-view 的下载量有多少？
根据 npm 官方下载统计，@flyerhq/react-native-keyboard-accessory-view 在 2026/10/15 – 2026/11/13 这 30 天内被下载 6,825 次，日均约 228 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @flyerhq/react-native-keyboard-accessory-view 还在维护吗？
最新版本 2\.4\.0 发布于 2022/01/28（4 年前）；至今共发布 30 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/06/02。作者已将其标记为弃用，新项目建议寻找替代方案。