# @codler/react-native-keyboard-aware-scroll-view 中文文档

规范地址：https://npmcn.com/package/%40codler/react-native-keyboard-aware-scroll-view/

版本：2\.0\.1
npm 元数据更新时间：2022-04-05T00:10:00.631Z
中文译文更新时间：2026-11-10T09:17:33.984Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40codler/react-native-keyboard-aware-scroll-view
原文对照：https://npmcn.com/package/%40codler/react-native-keyboard-aware-scroll-view/?lang=original
项目主页：https://github.com/codler/react-native-keyboard-aware-scroll-view#readme
源码仓库：https://github.com/codler/react-native-keyboard-aware-scroll-view

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：50.1 kB，13 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react-native \>=0\.65\.1
- 首次发布：2020-07-11T22:26:07.161Z
- 最新版本发布：2021-12-10T08:55:08.314Z
- 近 30 天下载量：25506（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

一个在键盘出现时修改大小的回放原生 ScrollView 组件 .

## 安装

```sh
npm install @codler/react-native-keyboard-aware-scroll-view
```

也可以使用：`pnpm add @codler/react-native-keyboard-aware-scroll-view`、`yarn add @codler/react-native-keyboard-aware-scroll-view`、`bun add @codler/react-native-keyboard-aware-scroll-view`

## README

# 反应-内生-键盘-意识-滚动-视图

![](https://travis-ci.org/APSL/react-native-keyboard-aware-scroll-view.svg?branch=master) ![](https://img.shields.io/npm/dm/react-native-keyboard-aware-scroll-view.svg) ![](https://img.shields.io/npm/dt/react-native-keyboard-aware-scroll-view.svg)

处理键盘外观并自动滚动到焦点的 ScrollView 组件 `TextInput`。 。 。 .

![Scroll demo](https://raw.githubusercontent.com/wiki/APSL/react-native-keyboard-aware-scroll-view/kasv.gif)

## 支持的版本

-   `v2.0.0` 需求 `RN>=0.65.1`
-   `v1.0.0` 需求 `RN>=0.63.0`

## 安装

安装可以通过 `npm`数字 :

```shell
npm i @codler/react-native-keyboard-aware-scroll-view --save
```

## 使用量

你可以用这个 `KeyboardAwareScrollView`, (中文(简体) ), `KeyboardAwareSectionList` 或 `KeyboardAwareFlatList` 组件。 他们接受 `ScrollView`, (中文(简体) ), `SectionList` 财务报告和审定财务报表 `FlatList` 默认道具和 执行自定义高顺序组件 `KeyboardAwareHOC` 用于处理键盘外观. 高顺序组件也可以使用,如果您想将其用于其他组件.

导入 `react-native-keyboard-aware-scroll-view` 将内容包入其中 内容:

```js
import { KeyboardAwareScrollView } from '@codler/react-native-keyboard-aware-scroll-view'
```

```jsx
<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>
```

## 自动滚动 `TextInput` 字段

截止 `v0.1.0`,组件自动滚动到焦点 `TextInput` 😎. 对于版本 `v0.0.7` 更年长的,你可以做以下.

### 程序滚动到任意 `TextInput`

滚动到任意 `TextInput` 字段,您可以使用内置方法 `scrollToFocusedInput`示例:

```js
_scrollToInput (reactNode: any) {
  // Add a 'scroll' ref to your ScrollView
  this.scroll.props.scrollToFocusedInput(reactNode)
}
```

```jsx
<KeyboardAwareScrollView
  innerRef={ref => {
    this.scroll = ref
  }}>
  <View>
    <TextInput
      onFocus={(event: Event) => {
        // `bind` the function if you're using ES6 classes
        this._scrollToInput(ReactNative.findNodeHandle(event.target))
      }}
    />
  </View>
</KeyboardAwareScrollView>
```

### 程序滚动到任意位置

还有一个内置的功能,允许您按程序滚动到滚动视图的任何位置:

```js
this.scroll.props.scrollToPosition(0, 0)
```

## 输入键盘事件

您可以注册到 `ScrollViewResponder` 事件 `onKeyboardWillShow` 财务报告和审定财务报表 `onKeyboardWillHide`数字 :

```jsx
<KeyboardAwareScrollView
  onKeyboardWillShow={(frames: Object) => {
    console.log('Keyboard event', frames)
  }}>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>
```

## Android 支持软件

首先,Android本土有这个功能,你可以很容易地通过设置来启用它 `windowSoftInputMode` 内 `AndroidManifest.xml`检查 [这里](https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft)。 。 。 .

但如果你想使用像 `extraHeight`,您需要启用Android支持,其步骤如下:

-   确定您使用反应本地化 `0.46` 或以上(或以上(一).
-   设定 `windowSoftInputMode` 改为 `adjustPan` 内 `AndroidManifest.xml`。 。 。 .
-   设定 `enableOnAndroid` 属性改为 `true`。 。 。 .

Android 支持不完美, 这里有所支持的列表 :

| **Prop** | **Android 支持软件** |
| --- | --- |
| `viewIsInsideTabBar` | 对 |
| `resetScrollToCoords` | 对 |
| `enableAutomaticScroll` | 对 |
| `extraHeight` | 对 |
| `extraScrollHeight` | 对 |
| `enableResetScrollToCoords` | 对 |
| `keyboardOpeningTime` | 没有 |

## API 密码

### 道具

所有的东西 `ScrollView`编号 :`FlatList` 道具会通过.

| **Prop** | **类型** | **说明** |
| --- | --- | --- |
| `innerRef` | `Function` | 获取组件的参考文献. |
| `viewIsInsideTabBar` | `boolean` | 添加一个代表 `TabBarIOS` 高点. |
| `resetScrollToCoords` | `Object: {x: number, y: number}` | 坐标,用于键盘隐藏时重置卷轴. |
| `enableAutomaticScroll` | `boolean` | 当焦点在 `TextInput` 将滚动位置,默认启用. |
| `extraHeight` | `number` | 聚焦时添加额外偏移 `TextInput`编号. |
| `extraScrollHeight` | `number` | 在键盘上添加额外偏移。 如果你想将元素粘在键盘上方,则有用. |
| `enableResetScrollToCoords` | `boolean` | 让用户启用或禁用自动重置ScrollToCoords. |
| `keyboardOpeningTime` | `number` | 设置滚动到新位置前的延迟时间, 默认为 250 |
| `enableOnAndroid` | `boolean` | 启用 Android 支持 |

### 方法

使用 `innerRef` 以获取组件引用和使用 `this.scrollRef.props` 获得这些方法.

| **方法** | **参数** | **说明** |
| --- | --- | --- |
| `getScrollResponder` | `void` | 获取 `ScrollResponder` |
| `scrollToPosition` | `x: number, y: number, animated: bool = true` | 滚动到有动画或没有动画的特定位置. |
| `scrollToEnd` | `animated?: bool = true` | 卷起以动画或无动画结尾. |
| `scrollIntoView` | `element: React.Element<*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } }` | 将键盘中的元素滚动到视图中. |

### 使用高订单组件

使任何组件都具有键盘意识是非常容易的. 看看密码 `KeyboardAwareFlatList`数字 :

```js
/* @flow */

import { FlatList } from 'react-native'
import listenToKeyboardEvents from './KeyboardAwareHOC'

export default listenToKeyboardEvents(FlatList)
```

也可以配置HOC. 有时提供静态配置比用道具配置行为更方便. 此 HOC 配置可以被道具所覆盖 .

```js
/* @flow */

import { FlatList } from 'react-native'
import listenToKeyboardEvents from './KeyboardAwareHOC'

const config = {
  enableOnAndroid: true,
  enableAutomaticScroll: true
}

export default listenToKeyboardEvents(config)(FlatList)
```

可用的配置选项有:

```js
{
  enableOnAndroid: boolean,
  contentContainerStyle: ?Object,
  enableAutomaticScroll: boolean,
  extraHeight: number,
  extraScrollHeight: number,
  enableResetScrollToCoords: boolean,
  keyboardOpeningTime: number,
  viewIsInsideTabBar: boolean,
  refPropName: string,
  extractNativeRef: Function
}
```

## 常见问题

### @codler/react-native-keyboard-aware-scroll-view 是什么？

一个在键盘出现时修改大小的回放原生 ScrollView 组件 \.

### 如何安装 @codler/react-native-keyboard-aware-scroll-view？

在项目目录运行 npm install @codler/react-native-keyboard-aware-scroll-view，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react-native（\>=0\.65\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @codler/react-native-keyboard-aware-scroll-view 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @codler/react-native-keyboard-aware-scroll-view 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @codler/react-native-keyboard-aware-scroll-view 可以商用吗？

@codler/react-native-keyboard-aware-scroll-view 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @codler/react-native-keyboard-aware-scroll-view 的下载量有多少？

根据 npm 官方下载统计，@codler/react-native-keyboard-aware-scroll-view 在 2026/10/10 – 2026/11/08 这 30 天内被下载 25,506 次，日均约 850 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @codler/react-native-keyboard-aware-scroll-view 还在维护吗？

最新版本 2\.0\.1 发布于 2021/12/10（4 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/07/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。