Web und React Native

Derselbe Import

Installiere ein Paket und importiere auf beiden Plattformen aus dessen Wurzel. React ist die einzige erforderliche Peer-Abhängigkeit; React Native ist eine optionale Peer-Abhängigkeit für native Apps. Keine Plattform braucht einen Provider, Wrapper oder Setup-Aufruf.

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

Wie Bewegung abgespielt wird

Im Web spielen die Komponenten über die Web Animations API mit analytisch abgetasteten Federn – keine Animationsbibliothek zu laden und kein React-Render pro Frame. Unter React Native nutzen die Komponenten Animated mit dem nativen Treiber für Transforms und Deckkraft und den JS-Treiber nur dort, wo sich Layout (Breite oder Höhe) ändert.

Besonderheiten unter React Native

Die API ist dieselbe; das sind die Unterschiede, die du auf einem Gerät bemerkst.

• Zahlen und gestreamter Text bleiben ein echtes Text, sodass Auswahl, Umbruch, numberOfLines und Barrierefreiheit wie gewohnt funktionieren.
• MotionSheet und MotionZoom rendern in einem transparenten Modal, und die Zurück-Taste schließt sie.
• Innere ScrollViews in einem Sheet behalten ihre eigenen Gesten; das Sheet wird an seinem Griff und an festen Bereichen gezogen.
• MotionHold bestätigt direkt über die Barrierefreiheitsaktion „Aktivieren“.
• Inline-MotionSwap misst neuen Inhalt auf einer Zeile; nutze inline=— für Inhalt, der umbricht.

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

Dein Layout bleibt deins

Komponenten behalten das plattformeigene Layout: Textmetriken, Umbruch, Schriftskalierung, Vorgaben des Elternelements und deine Styles. Bewegung zwingt deinem Text nie eine Zeichenbreite, eine feste Texthöhe oder eine Schnittmaske auf.

Was wo verifiziert ist

Das Web-Verhalten wird in echten Browsern verifiziert. Das React-Native-Verhalten ist durch Tests der gemeinsamen Modelle und einen gemockten Renderer abgedeckt – prüfe Gesten und Layout vor einem Release also auf deinen Zielgeräten.