Splet in React Native

Isti uvoz

Namestite en paket in na obeh platformah uvažajte iz njegovega korena. React je edina obvezna peer odvisnost; React Native je neobvezna peer odvisnost za domorodne aplikacije. Nobena platforma ne potrebuje providerja, ovoja ali klica za nastavitev.

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

Kako se gibanje predvaja

Na spletu komponente tečejo na Web Animations API z analitično vzorčenimi vzmetmi, zato ni treba naložiti nobene knjižnice za animacije in ni upodabljanja Reacta na sličico. V React Nativu komponente uporabljajo Animated z domorodnim driverjem za transformacije in prosojnost, driver JS pa le tam, kjer se spremeni postavitev (širina ali višina).

Posebnosti React Nativa

API je enak; to so razlike, ki jih boste opazili na napravi.

• Števila in pretočno besedilo ostanejo pravi Text, zato označevanje, prelamljanje, numberOfLines in dostopnost delujejo kot običajno.
• MotionSheet in MotionZoom se upodobita v prozornem Modal, zapre pa ju gumb za nazaj.
• Notranji ScrollView v sheetu ohranijo svoje geste; sheet se vleče za ročaj in statična območja.
• MotionHold potrdi neposredno z dejanjem aktivacije dostopnosti.
• Vrstični MotionSwap izmeri novo vsebino v eni vrstici; za vsebino, ki se prelamlja, uporabite inline=—.

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

Vaša postavitev ostane vaša

Komponente ohranijo postavitev platforme: mere besedila, prelamljanje, povečavo pisave, omejitve starša in vaše sloge. Gibanje vašemu besedilu nikoli ne vsili širine znaka, fiksne višine besedila ali maske obrezovanja.

Kaj je preverjeno kje

Vedenje na spletu je preverjeno v pravih brskalnikih. Vedenje v React Nativu pokrivajo testi skupnih modelov in posnemanega upodabljalnika, zato pred izdajo preverite geste in postavitev na ciljnih napravah.