Sieć i React Native

Ten sam import

Zainstaluj jeden pakiet i importuj z jego katalogu głównego na obu platformach. React to jedyna wymagana zależność peer; React Native to opcjonalny peer dla aplikacji natywnych. Żadna platforma nie potrzebuje providera, wrappera ani wywołania konfiguracji.

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

Jak odtwarzany jest ruch

W sieci komponenty odtwarzają się przez Web Animations API ze sprężynami próbkowanymi analitycznie, więc nie ma biblioteki animacji do wczytania ani renderu React w każdej klatce. W React Native komponenty używają Animated ze sterownikiem natywnym dla transform i opacity, a sterownika JS tylko tam, gdzie zmienia się układ (szerokość lub wysokość).

Specyfika React Native

API jest to samo; oto różnice, które zauważysz na urządzeniu.

• Liczby i tekst strumieniowany pozostają prawdziwym Text, więc zaznaczanie, zawijanie, numberOfLines i dostępność działają jak zwykle.
• MotionSheet i MotionZoom renderują się w przezroczystym Modal, a przycisk wstecz je zamyka.
• Wewnętrzne ScrollView w arkuszu zachowują własne gesty; arkusz przeciąga się za uchwyt i obszary statyczne.
• MotionHold potwierdza od razu z akcji aktywacji dostępności.
• MotionSwap inline mierzy nową treść w jednej linii; dla treści, która się zawija, użyj 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>
  );
}

Twój układ zostaje twój

Komponenty zachowują układ samej platformy: metryki tekstu, zawijanie, skalowanie czcionki, ograniczenia rodzica i twoje style. Ruch nigdy nie narzuca twojemu tekstowi szerokości znaku, stałej wysokości ani maski przycinania.

Co jest sprawdzone i gdzie

Zachowanie w sieci jest sprawdzone w prawdziwych przeglądarkach. Zachowanie w React Native pokrywają testy wspólnych modeli i symulowany renderer, więc przed wydaniem sprawdź gesty i układ na docelowych urządzeniach.