# @animatereactnative/accordion 中文文档

规范地址：https://npmcn.com/package/%40animatereactnative/accordion/

版本：0\.1\.5
npm 元数据更新时间：2025-01-22T19:56:27.335Z
中文译文更新时间：2026-11-08T08:40:25.953Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：42.3 kB，14 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native \*，react-native-reanimated \>=2\.2\.0
- 首次发布：2024-11-20T14:54:07.216Z
- 最新版本发布：2025-01-22T19:56:27.102Z
- 近 30 天下载量：1850（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

由能渲染和动画内容具有动态高度的React Introduct Entroduct动画所提供动力.

## 安装

```sh
npm install @animatereactnative/accordion
```

也可以使用：`pnpm add @animatereactnative/accordion`、`yarn add @animatereactnative/accordion`、`bun add @animatereactnative/accordion`

## README

# 反应本地协议

[https://github.com/user-attachments/assets/3906847e-c609-4f85-b5e5-b2bb68cef901 互联网档案馆的存檔,存档日期2013-12-2](https://github.com/user-attachments/assets/3906847e-c609-4f85-b5e5-b2bb68cef901)

[![NPM Version](https://img.shields.io/npm/v/@animatereactnative/accordion.svg?style=flat&color=black)](https://www.npmjs.org/package/@animatereactnative/accordion) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/) [![npm](https://img.shields.io/npm/l/@animatereactnative/accordion?style=flat-square)](https://www.npmjs.com/package/@animatereactnative/accordion) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@animatereactnative/accordion) [![Follow Miron Catalin](https://img.shields.io/twitter/follow/mironcatalin?label=Follow%20@mironcatalin&color=black)](https://twitter.com/mironcatalin)

反应原生Andion元件,是跨平面手风琴元件,由再动能提供动力,能够显示动态高能内容并激活可折叠和可扩展状态之间的布局变化/过渡.

如果您打算将这个组件与其他组件(作为兄弟姐妹)一起使用,建议使用 `Accordion.Sibling` 并用它包住兄弟们。 这是因为暴露 `Sibling` 组件也会使用布局动画,所以不会出现布局变化或突然移动,保持一切平稳.

-   由重力驱动
-   与博览会合作
-   • 跨平台(iOS、Android、Web-wip)
-   60-120小时
-   QQ 具有任何反应原生元素/组件的工作
-   \* 组成准备就绪
-   QQ 在类型脚本中写入

## 安装

```sh
npm install @animatereactnative/accordion
```

> 还有,你需要安装 [反应-原生再激活](https://github.com/software-mansion/react-native-reanimated),并遵循其安装指令.

## 使用量

```js
import { Accordion } from '@animatereactnative/accordion';

// ...

export function Example() {
  return (
    <Accordion.Accordion>
      <Accordion.Header>
        <Text>AnimateReactNative.com</Text>
        <Accordion.HeaderIcon>
          <ChevronUp />
        </Accordion.HeaderIcon>
      </Accordion.Header>

      <Accordion.Collapsed>
        <Text>Visible !expanded</Text>
      </Accordion.Collapsed>
      <Accordion.Always>
        <Text>Always visible</Text>
      </Accordion.Always>

      <Accordion.Expanded>
        <Text>Expanded content</Text>
        {loading && <ActivityIndicator />}
        {data & <MyList data={data} />}
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}
```

## 道具

```
Accordion = {
  /**
   * The main component that will handle the state of the accordion.
   *
   * @param isOpen boolean
   * @param onChange (value: boolean) => void
   */
  Accordion
  /**
   * The header of the accordion.
   */
  Header,
  /**
   * The component that will wrap any children and it will apply a rotation to it.
   *
   * @param children
   * @param rotation clockwise | counter-clockwise
   */
  HeaderIcon
  /**
   * This is the content that will be displayed when the accordion is open
   */
  Expanded,
  /**
   * This is the content that will be displayed when the accordion is closed
   */
  Collapsed,
  /**
   * This is the content that will always be displayed
   */
  Always,
  /**
   *
   * This is a component that will add the layout transition to any
   * sibling components. Useful when you are rendering other components
   * that are not direct children of the Accordion component.
   */
  Sibling,
};
```

## 捐款

见 [贡献指南](https://npmcn.com/package/%40animatereactnative/accordion/CONTRIBUTING.md) 学习如何为储存库和发展工作流程作出贡献.

## 许可证

[麻省理工学院](https://npmcn.com/package/%40animatereactnative/accordion/LICENSE)

* * *

[![AnimateReactNative.com - Premium and Custom React Native animations.](https://www.animatereactnative.com/animatereactnative_logo.svg)](https://www.animatereactnative.com/)

## 常见问题

### @animatereactnative/accordion 是什么？

由能渲染和动画内容具有动态高度的React Introduct Entroduct动画所提供动力\.

### 如何安装 @animatereactnative/accordion？

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

### @animatereactnative/accordion 支持 TypeScript 吗？

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

### @animatereactnative/accordion 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @animatereactnative/accordion 可以商用吗？

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

### @animatereactnative/accordion 的下载量有多少？

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

### @animatereactnative/accordion 还在维护吗？

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