Web ve React Native

Aynı import

Tek bir paket kurun ve iki platformda da kökünden import edin. Zorunlu tek peer React'tir; React Native, native uygulamalar için isteğe bağlı bir peer'dır. Hiçbir platform provider, sarmalayıcı ya da kurulum çağrısı gerektirmez.

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

Hareket nasıl oynatılır

Web'de bileşenler, yayları analitik örneklenen Web Animations API üzerinde oynatılır; yüklenecek animasyon kütüphanesi ve kare başına React render'ı yoktur. React Native'de bileşenler transform'lar ve opaklık için native driver ile Animated kullanır, JS driver'ı ise yalnızca düzenin (genişlik ya da yükseklik) değiştiği yerde.

React Native'e özgü noktalar

API aynıdır; bunlar cihazda fark edeceğiniz farklardır.

• Sayılar ve akan metin gerçek bir Text olarak kalır; seçim, satır kaydırma, numberOfLines ve erişilebilirlik her zamanki gibi davranır.
• MotionSheet ve MotionZoom şeffaf bir Modal içinde render edilir ve geri düğmesi onları kapatır.
• Bir sheet içindeki ScrollView'lar kendi hareketlerini korur; sheet tutamacından ve sabit alanlarından sürüklenir.
• MotionHold doğrudan erişilebilirlik etkinleştirme eyleminden onaylar.
• Satır içi MotionSwap yeni içeriği tek satırda ölçer; kayan içerik için inline=— kullanın.

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

Düzeniniz size ait kalır

Bileşenler platformun kendi düzenini korur: metin ölçüleri, satır kaydırma, yazı tipi ölçekleme, üst öğe kısıtları ve stilleriniz. Hareket metninize asla karakter genişliği, sabit metin yüksekliği ya da kırpma maskesi dayatmaz.

Neyin nerede doğrulandığı

Web davranışı gerçek tarayıcılarda doğrulanır. React Native davranışı paylaşılan modellerin ve taklit bir render edicinin testleriyle kapsanır; yayın öncesinde hareketleri ve düzeni hedef cihazlarınızda kontrol edin.