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

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

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

安装

npm install @animatereactnative/accordion

还有,你需要安装 反应-原生再激活,并遵循其安装指令.

使用量

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,
};

捐款

见 贡献指南 学习如何为储存库和发展工作流程作出贡献.

许可证

麻省理工学院