Web și React Native

Același import

Instalați un singur pachet și importați din rădăcina lui pe ambele platforme. React este singurul peer obligatoriu; React Native este un peer opțional pentru aplicațiile native. Nicio platformă nu are nevoie de provider, înveliș sau apel de configurare.

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

Cum se redă mișcarea

Pe web, componentele se redau pe Web Animations API, cu arcuri eșantionate analitic, așa că nu trebuie încărcată nicio bibliotecă de animație și nu există randare React per cadru. În React Native, componentele folosesc Animated cu driverul nativ pentru transformări și opacitate și driverul JS doar acolo unde se schimbă layoutul (lățimea sau înălțimea).

Particularități React Native

API-ul este același; acestea sunt diferențele pe care le veți observa pe dispozitiv.

• Numerele și textul în flux rămân un Text real, așa că selecția, încadrarea pe rânduri, numberOfLines și accesibilitatea se comportă ca de obicei.
• MotionSheet și MotionZoom se randează într-un Modal transparent, iar butonul înapoi le închide.
• ScrollView-urile dintr-un sheet își păstrează gesturile; sheet-ul se trage de mâner și de zonele statice.
• MotionHold confirmă direct din acțiunea de activare a accesibilității.
• MotionSwap inline măsoară noul conținut pe un singur rând; folosiți inline=— pentru conținut care se încadrează pe mai multe rânduri.

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

Layoutul rămâne al dumneavoastră

Componentele păstrează layoutul propriu al platformei: metricile textului, încadrarea pe rânduri, scalarea fontului, constrângerile părintelui și stilurile dumneavoastră. Mișcarea nu impune niciodată textului o lățime de caracter, o înălțime fixă sau o mască de decupare.

Ce se verifică și unde

Comportamentul web este verificat în browsere reale. Comportamentul React Native este acoperit de teste ale modelelor comune și ale unui renderer simulat, așa că verificați gesturile și layoutul pe dispozitivele țintă înainte de o lansare.