Guides · 02

Web og React Native

Én import til begge platforme. Metro vælger native-implementeringen, og webbundlere vælger DOM-versionen.

Samme import

Installér én pakke, og importér fra dens rod på begge platforme. React er den eneste påkrævede peer; React Native er en valgfri peer til native-apps. Ingen af platformene behøver provider, wrapper eller opsætningskald.

App.jsx

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

Sådan afspilles bevægelse

På nettet afspilles komponenterne med Web Animations API og analytisk samplede fjedre, så der er intet animationsbibliotek at indlæse og ingen React-rendering pr. frame. I React Native bruger komponenterne Animated med native driver til transforms og opacity og JS-driver kun dér, hvor layoutet (bredde eller højde) ændrer sig.

Del	Web	React Native
Transforms og opacity	Web Animations API	`Animated`, native driver
Bredde og højde	Web Animations API	`Animated`, JS-driver
Streamet tekst	Tegn, der toner ind, nogle få React-renderinger i sekundet	En rigtig `Text`, uden toning
Sheets og zoom	Native `dialog` i det øverste lag	Gennemsigtig `Modal`
Baggrund	I en skjult fane vises streamet tekst med det samme	Bevægelsen lander i sin sluttilstand

Særligt for React Native

API'et er det samme; dette er forskellene, du vil bemærke på en enhed.

Tal og streamet tekst forbliver en rigtig Text, så markering, ombrydning, numberOfLines og tilgængelighed opfører sig som normalt.
MotionSheet og MotionZoom renderes i en gennemsigtig Modal, og tilbageknappen lukker dem.
Indre ScrollViews i en sheet beholder deres egne gestus; sheeten trækkes i sit håndtag og faste områder.
MotionHold bekræfter direkte fra tilgængelighedshandlingen aktivér.
Inline-MotionSwap måler nyt indhold på én linje; brug inline=— til indhold, der ombrydes.

Screen.native.jsx

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

Dit layout forbliver dit

Komponenterne beholder platformens eget layout: tekstmål, ombrydning, skalering af skrifttype, forælderens begrænsninger og dine stilarter. Bevægelsen påtvinger aldrig din tekst en tegnbredde, en fast teksthøjde eller en klipningsmaske.

Hvad der er verificeret og hvor

Adfærden på nettet er verificeret i rigtige browsere. Adfærden i React Native er dækket af tests af de delte modeller og en simuleret renderer, så tjek gestus og layout på dine målenheder før en udgivelse.