Morphlet

https://github.com/user-attachments/assets/9c98763d-f6f1-4dfb-9a7b-90ca5087efc5

一个面向 React Native 的原生形变浮动托盘（floating tray）组件。

<Tray.Root>
  <Tray.Trigger morph>…</Tray.Trigger>
  <Tray.Content>…</Tray.Content>
</Tray.Root>

安装

npm install morphlet
cd ios && pod install

需要 New Architecture（新架构）。Android 需 API 24+。在 Expo 上请使用 development build（开发构建）。

用法

import { Text } from 'react-native';
import { Tray } from 'morphlet';

export function Example() {
  return (
    <Tray.Root>
      <Tray.Trigger>
        <Text>Open</Text>
      </Tray.Trigger>

      <Tray.Content>
        <Tray.Header>
          <Tray.Title>Hello</Tray.Title>
        </Tray.Header>
        <Tray.Body>
          <Tray.Description>A tray that springs to fit.</Tray.Description>
        </Tray.Body>
        <Tray.Footer>
          <Tray.Close>
            <Text>Done</Text>
          </Tray.Close>
        </Tray.Footer>
      </Tray.Content>
    </Tray.Root>
  );
}

视图（Views）

<Tray.Root defaultView="options">
  <Tray.Trigger>…</Tray.Trigger>
  <Tray.Content>
    <Tray.Body>
      <Tray.View name="options">
        <Options />
      </Tray.View>
      <Tray.View name="details" fullScreen>
        <Details />
      </Tray.View>
    </Tray.Body>
  </Tray.Content>
</Tray.Root>;

function Options() {
  const { setView } = useTray();
  return <Row title="Details" onPress={() => setView('details')} />;
}

将任意内容包裹在 <Tray.Morph value={...}> 中，当 value 变化时即可产生过渡动画。给 Tray.Content 添加 stack，可将下方的托盘像 iOS sheet 一样向后推入堆栈。

API

组件	用途
`Tray.Root`	打开状态与当前视图。`open`、`view`、`transition`、`animation`。
`Tray.Trigger` / `Tray.Close`	打开或关闭。支持 `asChild`，以及通过 `morph` 让托盘从触发器处生长展开。
`Tray.Content`	卡片本体。`backgroundColor`、`cornerRadius`、`dismissible`、`fullScreen`、`stack`。
`Tray.Header` / `Tray.Footer`	包裹正文区域的固定部分。
`Tray.Body` / `Tray.View`	在命名视图之间形变切换。
`Tray.Morph`	当 `value` 变化时对子元素进行过渡。
`Tray.Title` / `Tray.Description`	无障碍文本。

const { open, close, view, setView, goBack, canGoBack, setFullScreen } =
  useTray();

过渡动画： morph · slide · fade · scale 动画预设： default · smooth · snappy · bouncy —— 也可传入自定义弹簧参数：

<Tray.Root animation={{ preset: 'smooth', morph: { response: 0.6, dampingFraction: 0.8 } }}>

示例

yarn
yarn example ios   # 或 android

参与贡献

请参阅 CONTRIBUTING.md。

许可证

MIT