Web og React Native

Samme import

Installer én pakke og importer fra roten på begge plattformene. React er den eneste påkrevde peer-en; React Native er en valgfri peer for native-apper. Ingen av plattformene trenger provider, omslag eller oppsettkall.

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

Slik spilles bevegelse av

På nettet spilles komponentene av med Web Animations API og analytisk samplede fjærer, så det finnes ikke noe animasjonsbibliotek å laste inn og ingen React-rendering per bilde. I React Native bruker komponentene Animated med native driver for transforms og opacity, og JS-driver bare der layouten (bredde eller høyde) endres.

Spesielt for React Native

API-et er det samme; dette er forskjellene du merker på en enhet.

• Tall og strømmet tekst forblir en ekte Text, så merking, linjebryting, numberOfLines og tilgjengelighet fungerer som vanlig.
• MotionSheet og MotionZoom renderes i en gjennomsiktig Modal, og tilbakeknappen lukker dem.
• Indre ScrollView-er i en sheet beholder egne bevegelser; sheeten dras i håndtaket og faste områder.
• MotionHold bekrefter direkte fra tilgjengelighetshandlingen aktiver.
• Inline-MotionSwap måler nytt innhold på én linje; bruk inline=— for innhold som brytes.

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

Layouten din forblir din

Komponentene beholder plattformens egen layout: tekstmål, linjebryting, skalering av skrift, forelderens begrensninger og stilene dine. Bevegelsen tvinger aldri en tegnbredde, en fast teksthøyde eller en klippemaske på teksten din.

Hva som er verifisert, og hvor

Oppførselen på nettet er verifisert i ekte nettlesere. Oppførselen i React Native dekkes av tester av de delte modellene og en simulert renderer, så sjekk bevegelser og layout på målenhetene dine før en utgivelse.