Első lépések · 4 lépés

Kezdje el

Telepítse a csomagot, renderelje az első komponenst, adja át egy komponensnek az adatait, és válassza ki, hogyan mozogjon. Egyik lépésben sincs provider vagy beállítás.

1
Telepítés
A Chorushoz React 19.2 vagy újabb kell. React Native alkalmazásban a React Native opcionális peer, és ugyanaz a csomag automatikusan kiválasztja a natív buildjét.
$
```
npm install @kkwaenggwari/animated-chorus
```
Mást nem kell beállítani: nincs hozzáadandó provider, bővítmény vagy stíluslap.
2
Az első komponense
Renderelje a MotionNumber-t egy állapotból származó értékkel. Módosítsa az állapotot, és a szám pörög. Nyomja meg a +1, majd a ×10 gombot, és nézze, ahogy egy új helyiérték bepörög.
App.jsx
```
import { useState } from 'react';
import { MotionNumber } from '@kkwaenggwari/animated-chorus';

export default function App() {
  const [count, setCount] = useState(9);
  return (
    <button onClick={() => setCount(count + 1)}>
      <MotionNumber value={count} />
    </button>
  );
}
```
A példa előkészítése…
Állítsa a mode értékét roll-ra a beállításokban: a megváltozott helyiértékek végigpörögnek a köztes számjegyeken.
3
Adja át az adatait
A több dolgot megjelenítő komponensek tömböt fogadnak. Az items az Ön adata, a getKey stabil key-t ad vissza (alapértelmezés item.id, illetve karakterláncoknál és számoknál maga az elem), a renderItem pedig minden elemet megrajzol. A komponens rendereli és méri az elemeket Ön helyett.
Tabs.jsx
```
import { MotionHighlight } from '@kkwaenggwari/animated-chorus';

const tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'activity', label: 'Activity' },
];

export function Tabs({ tab, setTab }) {
  // Keys come from item.id; labels from item.label, or renderItem.
  return <MotionHighlight items={tabs} value={tab} onValueChange={setTab} />;
}
```
A key-eknek egyedinek kell lenniük. Ha a tömb változik, csak a belépő, kilépő vagy elmozduló elemek animálódnak.

Válassza ki, hogyan mozogjon

Minden komponens elfogad egy transition értéket: timing-görbét vagy rugót. A motionTokens néhány előbeállítást kínál, a duration-nel megadott rugó pedig úgy van kalibrálva, hogy pontosan akkor érjen véget.

Panel.jsx

import { MotionHeight, motionTokens } from '@kkwaenggwari/animated-chorus';

<MotionHeight open={open} transition={motionTokens.spring.gentle}>…</MotionHeight>
<MotionHeight open={open} transition={{ duration: 300, easing: 'easeOut' }}>…</MotionHeight>
<MotionHeight open={open} transition={{ tempo: 'spring', spring: { stiffness: 300, damping: 30 }, duration: 500 }}>…</MotionHeight>

A React Native ugyanazt az importot és ugyanazokat a props-okat használja.

Ennyi a teljes beállítás

A többi a komponensek kiválasztása. Mindegyiknek van munkapadja, ahol a kód másolása előtt behangolhatja.

Telepítés

Az első komponense

Adja át az adatait

Válassza ki, hogyan mozogjon

Ennyi a teljes beállítás