Web a React Native

Stejný import

Nainstalujte jeden balíček a na obou platformách importujte z jeho kořene. React je jediná povinná peer závislost; React Native je volitelná peer pro nativní aplikace. Žádná platforma nepotřebuje provider, obal ani volání nastavení.

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

Jak se pohyb přehrává

Na webu se komponenty přehrávají přes Web Animations API s analyticky vzorkovanými pružinami, takže není potřeba načítat knihovnu animací a v žádném snímku neprobíhá render Reactu. V React Native komponenty používají Animated s nativním driverem pro transformace a opacity a driver JS jen tam, kde se mění rozvržení (šířka nebo výška).

Specifika React Native

API je stejné; toto jsou rozdíly, kterých si na zařízení všimnete.

• Čísla i streamovaný text zůstávají skutečným Text, takže označování, zalamování, numberOfLines i přístupnost fungují jako obvykle.
• MotionSheet a MotionZoom se renderují v průhledném Modal a zavře je tlačítko zpět.
• Vnitřní ScrollView v sheetu si zachovávají vlastní gesta; sheet se táhne za úchyt a pevné oblasti.
• MotionHold potvrdí přímo z akce přístupnosti aktivovat.
• Inline MotionSwap měří nový obsah na jednom řádku; pro obsah, který se zalamuje, použijte 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 rozvržení zůstává vaše

Komponenty zachovávají vlastní rozvržení platformy: metriky textu, zalamování, škálování písma, omezení rodiče i vaše styly. Pohyb vašemu textu nikdy nevnutí šířku znaku, pevnou výšku ani ořezovou masku.

Co je ověřeno a kde

Chování na webu je ověřené ve skutečných prohlížečích. Chování v React Native pokrývají testy sdílených modelů a simulovaný renderer, proto před vydáním ověřte gesta a rozvržení na cílových zařízeních.