Web a React Native

Rovnaký import

Nainštalujte jeden balík a na oboch platformách importujte z jeho koreňa. React je jediná povinná peer závislosť; React Native je voliteľná peer pre natívne aplikácie. Žiadna platforma nepotrebuje provider, obal ani volanie nastavenia.

// 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} />
    </>
  );
}

Ako sa pohyb prehráva

Na webe sa komponenty prehrávajú cez Web Animations API s analyticky vzorkovanými pružinami, takže netreba načítavať knižnicu animácií a v žiadnej snímke neprebieha render Reactu. V React Native komponenty používajú Animated s natívnym driverom pre transformácie a opacity a driver JS len tam, kde sa mení rozloženie (šírka alebo výška).

Špecifiká React Native

API je rovnaké; toto sú rozdiely, ktoré si na zariadení všimnete.

• Čísla aj streamovaný text zostávajú skutočným Text, takže označovanie, zalamovanie, numberOfLines aj prístupnosť fungujú ako obvykle.
• MotionSheet a MotionZoom sa renderujú v priehľadnom Modal a zavrie ich tlačidlo späť.
• Vnútorné ScrollView v sheete si zachovávajú vlastné gestá; sheet sa ťahá za úchyt a pevné oblasti.
• MotionHold potvrdí priamo z akcie prístupnosti aktivovať.
• Inline MotionSwap meria nový obsah na jednom riadku; pre obsah, ktorý sa zalamuje, použite 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še rozloženie zostáva vaše

Komponenty zachovávajú vlastné rozloženie platformy: metriky textu, zalamovanie, škálovanie písma, obmedzenia rodiča aj vaše štýly. Pohyb vášmu textu nikdy nevnúti šírku znaku, pevnú výšku ani orezovú masku.

Čo je overené a kde

Správanie na webe je overené v skutočných prehliadačoch. Správanie v React Native pokrývajú testy zdieľaných modelov a simulovaný renderer, preto pred vydaním overte gestá a rozloženie na cieľových zariadeniach.