Web ja React Native

Sama import

Asenna yksi paketti ja importtaa sen juuresta molemmilla alustoilla. React on ainoa pakollinen peer; React Native on valinnainen peer natiivisovelluksille. Kumpikaan alusta ei tarvitse provideria, käärettä eikä alustuskutsua.

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

Miten liike toistetaan

Webissä komponentit toistetaan Web Animations API:lla analyyttisesti näytteistetyillä jousilla, joten animaatiokirjastoa ei ladata eikä React-renderöintiä tehdä ruutua kohden. React Nativessa komponentit käyttävät Animated-moduulia natiivilla driverilla muunnoksiin ja peittävyyteen ja JS-driveria vain siellä, missä asettelu (leveys tai korkeus) muuttuu.

React Nativen erityispiirteet

API on sama; nämä ovat erot, jotka huomaat laitteella.

• Numerot ja virtaava teksti pysyvät oikeana Text-elementtinä, joten valinta, rivitys, numberOfLines ja saavutettavuus toimivat tavalliseen tapaan.
• MotionSheet ja MotionZoom renderöidään läpinäkyvään Modal-elementtiin, ja takaisin-painike sulkee ne.
• Sheetin sisemmät ScrollView-elementit säilyttävät omat eleensä; sheetiä vedetään kahvasta ja staattisista alueista.
• MotionHold vahvistaa suoraan saavutettavuuden aktivointitoiminnosta.
• Inline-MotionSwap mittaa uuden sisällön yhdellä rivillä; käytä inline=— rivittyvälle sisällölle.

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

Asettelusi pysyy sinun

Komponentit säilyttävät alustan oman asettelun: tekstin mitat, rivityksen, fonttiskaalauksen, vanhemman rajoitteet ja tyylisi. Liike ei koskaan pakota tekstiisi merkkileveyttä, kiinteää tekstikorkeutta tai rajausmaskia.

Mitä tarkistetaan missä

Webin toiminta tarkistetaan oikeissa selaimissa. React Nativen toiminta katetaan jaettujen mallien ja simuloidun renderöijän testeillä, joten tarkista eleet ja asettelu kohdelaitteillasi ennen julkaisua.