Уеб и React Native

Същият импорт

Инсталирайте един пакет и импортирайте от корена му на двете платформи. React е единствената задължителна peer зависимост; React Native е незадължителна peer за нативни приложения. Нито една платформа не се нуждае от provider, обвивка или извикване за настройка.

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

Как се възпроизвежда движението

В уеб компонентите се възпроизвеждат чрез Web Animations API с аналитично изчислени пружини, така че няма библиотека за анимации за зареждане и няма рендер на React на всеки кадър. В React Native компонентите използват Animated с нативния драйвер за transform и opacity и JS драйвера само там, където се променя оформлението (ширина или височина).

Особености на React Native

API е същият; това са разликите, които ще забележите на устройството.

• Числата и поточният текст остават истински Text, така че маркирането, пренасянето, numberOfLines и достъпността работят както обикновено.
• MotionSheet и MotionZoom се рендерират в прозрачен Modal и се затварят с бутона „Назад“.
• Вътрешните ScrollView в панела запазват собствените си жестове; панелът се влачи за дръжката и статичните области.
• MotionHold потвърждава директно чрез действието за активиране на достъпността.
• Вграденият MotionSwap измерва новото съдържание на един ред; за съдържание, което се пренася, използвайте 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>
  );
}

Оформлението ви си остава ваше

Компонентите запазват собственото оформление на платформата: метрики на текста, пренасяне, мащабиране на шрифта, ограничения на родителя и вашите стилове. Движението никога не налага на текста ви ширина на знак, фиксирана височина или маска за изрязване.

Какво е проверено и къде

Поведението в уеб е проверено в истински браузъри. Поведението в React Native е покрито от тестове на общите модели и симулиран рендерер, затова проверете жестовете и оформлението на целевите си устройства преди издаване.