Web és React Native

Ugyanaz az import

Telepítsen egyetlen csomagot, és mindkét platformon a gyökeréből importáljon. A React az egyetlen kötelező peer; a React Native opcionális peer natív alkalmazásokhoz. Egyik platformnak sincs szüksége providerre, burkolóra vagy beállító hívásra.

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

Hogyan játszódik le a mozgás

Weben a komponensek a Web Animations API-n futnak, analitikusan mintavételezett rugókkal, így nincs betöltendő animációs könyvtár és nincs képkockánkénti React-renderelés. React Native alatt a komponensek a transzformációkhoz és az átlátszatlansághoz natív driverrel használják az Animated modult, a JS-drivert pedig csak ott, ahol az elrendezés (szélesség vagy magasság) változik.

React Native-sajátosságok

Az API ugyanaz; ezeket a különbségeket fogja észrevenni az eszközön.

• A számok és a folyamatos szöveg valódi Text maradnak, így a kijelölés, a tördelés, a numberOfLines és az akadálymentesség a szokásos módon viselkedik.
• A MotionSheet és a MotionZoom átlátszó Modal-ban renderel, és a vissza gomb bezárja őket.
• A sheetben lévő ScrollView-k megtartják saját gesztusaikat; a sheet a fogantyújánál és statikus területeinél húzható.
• A MotionHold közvetlenül az akadálymentességi aktiválási műveletből erősít meg.
• Az inline MotionSwap egy sorban méri az új tartalmat; tördelődő tartalomhoz használja az inline=— beállítást.

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

Az elrendezés az Öné marad

A komponensek megtartják a platform saját elrendezését: a szövegmetrikákat, a tördelést, a betűméretezést, a szülő korlátait és az Ön stílusait. A mozgás soha nem kényszerít a szövegre karakterszélességet, rögzített szövegmagasságot vagy vágómaszkot.

Mit hol ellenőrzünk

A webes viselkedést valódi böngészőkben ellenőrizzük. A React Native-viselkedést a közös modellek és egy szimulált renderelő tesztjei fedik le, ezért kiadás előtt ellenőrizze a gesztusokat és az elrendezést a céleszközökön.