Web en React Native

Dezelfde import

Installeer één pakket en importeer op beide platforms vanuit de root. React is de enige vereiste peer; React Native is een optionele peer voor native apps. Geen van beide platforms heeft een provider, wrapper of setup-aanroep nodig.

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

Hoe beweging wordt afgespeeld

Op het web spelen componenten af op de Web Animations API met analytisch bemonsterde veren, dus er hoeft geen animatielibrary te laden en er is geen React-render per frame. In React Native gebruiken componenten Animated met de native driver voor transforms en opacity, en de JS-driver alleen waar de layout (breedte of hoogte) verandert.

Specifiek voor React Native

De API is hetzelfde; dit zijn de verschillen die je op een apparaat merkt.

• Getallen en gestreamde tekst blijven een echte Text, dus selectie, doorlopen, numberOfLines en toegankelijkheid werken zoals gewoonlijk.
• MotionSheet en MotionZoom renderen in een transparante Modal, en de terugknop sluit ze.
• Binnenste ScrollViews in een sheet houden hun eigen gebaren; de sheet sleep je aan zijn greep en vaste delen.
• MotionHold bevestigt direct vanuit de toegankelijkheidsactie activeren.
• Inline MotionSwap meet nieuwe inhoud op één regel; gebruik inline=— voor inhoud die doorloopt.

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

Je layout blijft van jou

Componenten houden de eigen layout van het platform aan: tekstmetrieken, doorlopen, lettergrootteschaling, beperkingen van de ouder en je stijlen. Beweging dwingt je tekst nooit een tekenbreedte, vaste teksthoogte of knipmasker op.

Wat waar is gecontroleerd

Het gedrag op het web is gecontroleerd in echte browsers. Het gedrag in React Native wordt gedekt door tests van de gedeelde modellen en een gesimuleerde renderer, dus controleer gebaren en layout op je doelapparaten vóór een release.