Webb och React Native

Samma import

Installera ett paket och importera från dess rot på båda plattformarna. React är enda obligatoriska peer; React Native är en valfri peer för native-appar. Ingen av plattformarna behöver provider, omslag eller setup-anrop.

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

Så spelas rörelse upp

På webben spelas komponenterna upp med Web Animations API och analytiskt samplade fjädrar, så det finns inget animationsbibliotek att läsa in och ingen React-rendering per bildruta. I React Native använder komponenterna Animated med native driver för transforms och opacity, och JS-driver bara där layouten (bredd eller höjd) ändras.

Specifikt för React Native

API:t är detsamma; det här är skillnaderna du märker på en enhet.

• Siffror och strömmad text förblir en riktig Text, så markering, radbrytning, numberOfLines och tillgänglighet fungerar som vanligt.
• MotionSheet och MotionZoom renderas i en genomskinlig Modal, och bakåtknappen stänger dem.
• Inre ScrollViews i en sheet behåller sina egna gester; sheeten dras i sitt handtag och fasta ytor.
• MotionHold bekräftar direkt från tillgänglighetsåtgärden aktivera.
• Inline-MotionSwap mäter nytt innehåll på en rad; använd inline=— för innehåll som radbryts.

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

Din layout förblir din

Komponenterna behåller plattformens egen layout: textmått, radbrytning, typsnittsskalning, förälderns begränsningar och dina stilar. Rörelsen tvingar aldrig på din text en teckenbredd, en fast texthöjd eller en klippmask.

Vad som är verifierat och var

Beteendet på webben är verifierat i riktiga webbläsare. Beteendet i React Native täcks av tester av de delade modellerna och en simulerad renderare, så kontrollera gester och layout på dina målenheter före en release.