Pirmieji žingsniai · 4 žingsniai

Pradėkite

Įdiekite paketą, atvaizduokite pirmąjį komponentą, perduokite komponentui savo duomenis ir pasirinkite, kaip jis juda. Jokiame žingsnyje nėra provider ar nustatymo.

1
Diegimas
Chorus reikia React 19.2 arba naujesnės versijos. React Native programoje React Native yra neprivalomas peer, o tas pats paketas savo vietinę versiją pasirenka automatiškai.
$
```
npm install @kkwaenggwari/animated-chorus
```
Daugiau nieko konfigūruoti nereikia: jokio provider, papildinio ar stilių failo pridėti nereikia.
2
Jūsų pirmasis komponentas
Atvaizduokite MotionNumber su reikšme iš būsenos. Pakeiskite būseną, ir skaičius pasisuks. Paspauskite +1, tada ×10 ir stebėkite, kaip įsisuka naujas skaitmuo.
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>
  );
}
```
Ruošiamas pavyzdys…
Nustatymuose perjunkite mode į roll: pasikeitę skaitmenys pereina per tarpinius skaitmenis.
3
Perduokite savo duomenis
Kelis dalykus rodantys komponentai priima masyvą. items yra jūsų duomenys, getKey grąžina stabilų key (pagal numatymą item.id arba patį elementą eilutėms ir skaičiams), o renderItem nupiešia kiekvieną elementą. Komponentas atvaizduoja ir išmatuoja elementus už jus.
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} />;
}
```
key turi būti unikalūs. Pasikeitus masyvui animuojami tik įėję, išėję ar pasislinkę elementai.

Pasirinkite, kaip jis juda

Kiekvienas komponentas priima transition: timing kreivę arba spyruoklę. motionTokens siūlo kelis išankstinius nustatymus, o spyruoklė su duration sukalibruojama baigtis tiksliai tada.

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 naudoja tą patį importą ir tuos pačius props.

Tai visas nustatymas

Visa kita – komponentų pasirinkimas. Kiekvienas turi darbo stalą, kuriame galite jį sureguliuoti prieš kopijuodami kodą.

Diegimas

Jūsų pirmasis komponentas

Perduokite savo duomenis

Pasirinkite, kaip jis juda

Tai visas nustatymas