Web i React Native

Isti import

Instalirajte jedan paket i uvozite iz njegova korijena na obje platforme. React je jedina obavezna peer ovisnost; React Native je neobavezna peer za nativne aplikacije. Nijedna platforma ne treba provider, omotač ni poziv za postavljanje.

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}

Kako se pokret reproducira

Na webu se komponente reproduciraju preko Web Animations API-ja s analitički uzorkovanim oprugama, pa nema biblioteke animacija za učitavanje ni Reactova renderiranja u svakom kadru. U React Nativeu komponente koriste Animated s nativnim driverom za transformacije i opacity, a JS driver samo gdje se mijenja raspored (širina ili visina).

Posebnosti React Nativea

API je isti; ovo su razlike koje ćete primijetiti na uređaju.

• Brojevi i tekst iz streama ostaju pravi Text, pa označavanje, prelamanje, numberOfLines i pristupačnost rade kao i obično.
• MotionSheet i MotionZoom renderiraju se u prozirnom Modal, a zatvara ih gumb za natrag.
• Unutarnji ScrollView u sheetu zadržavaju vlastite geste; sheet se povlači za ručku i statična područja.
• MotionHold potvrđuje izravno iz radnje aktivacije pristupačnosti.
• Inline MotionSwap mjeri novi sadržaj u jednom retku; za sadržaj koji se prelama koristite inline=—.

import { Text, View } from 'react-native';
import { MotionNumber, MotionSheet } from '@kkwaenggwari/animated-chorus';

export function Wallet({ balance, open, setOpen }) {
  return (
    <View>
      <MotionNumber
        value={balance}
        intl
        locale="en-US"
        format={{ style: 'currency', currency: 'USD' }}
      />
      <MotionSheet open={open} onOpenChange={setOpen} detents={[0.5, 0.9]}>
        <Text>Recent activity</Text>
      </MotionSheet>
    </View>
  );
}

Vaš raspored ostaje vaš

Komponente zadržavaju vlastiti raspored platforme: metrike teksta, prelamanje, skaliranje fonta, ograničenja roditelja i vaše stilove. Pokret vašem tekstu nikad ne nameće širinu znaka, fiksnu visinu ni masku obrezivanja.

Što je provjereno i gdje

Ponašanje na webu provjereno je u pravim preglednicima. Ponašanje u React Nativeu pokrivaju testovi zajedničkih modela i simulirani renderer, pa prije izdanja provjerite geste i raspored na ciljnim uređajima.