Začetek · 4 koraki

Začnite

Namestite paket, upodobite prvo komponento, dajte komponenti svoje podatke in izberite, kako se premika. V nobenem koraku ni providerja ali nastavitve.

1
Namestitev
Chorus potrebuje React 19.2 ali novejši. V aplikaciji React Native je React Native neobvezna peer odvisnost, isti paket pa samodejno izbere svojo domorodno gradnjo.
$
```
npm install @kkwaenggwari/animated-chorus
```
Ničesar drugega ni treba nastaviti: ni providerja, vtičnika ali slogovne datoteke, ki bi jo bilo treba dodati.
2
Vaša prva komponenta
Upodobite MotionNumber z vrednostjo iz stanja. Spremenite stanje in število se zavrti. Pritisnite +1, nato ×10 in glejte, kako se zavrti novo mesto.
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>
  );
}
```
Pripravljanje primera …
V nastavitvah preklopite mode na roll: spremenjena mesta gredo skozi vmesne števke.
3
Dajte ji svoje podatke
Komponente, ki prikazujejo več stvari, sprejmejo polje. items so vaši podatki, getKey vrne stabilen ključ (privzeto item.id ali sam element za nize in števila), renderItem pa nariše vsak element. Komponenta elemente upodobi in izmeri namesto vas.
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} />;
}
```
Ključi morajo biti enolični. Ko se polje spremeni, se animirajo le elementi, ki so prišli, odšli ali se premaknili.

Izberite, kako se premika

Vsaka komponenta sprejme transition: krivuljo timinga ali vzmet. motionTokens ponuja nekaj prednastavitev, vzmet z duration pa je umerjena tako, da se konča natanko takrat.

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>

React Native uporablja isti uvoz in iste props.

To je vsa nastavitev

Vse drugo je izbira komponent. Vsaka ima delovno mizo, kjer jo lahko prilagodite, preden kopirate kodo.

Namestitev

Vaša prva komponenta

Dajte ji svoje podatke

Izberite, kako se premika

To je vsa nastavitev