Web dan React Native

Impor yang sama

Instal satu paket dan impor dari akarnya di kedua platform. React satu-satunya peer wajib; React Native adalah peer opsional untuk aplikasi native. Tidak ada platform yang memerlukan provider, pembungkus, atau panggilan penyiapan.

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

Cara gerak diputar

Di web, komponen diputar dengan Web Animations API dengan pegas yang disampel secara analitis, jadi tidak ada pustaka animasi yang dimuat dan tidak ada render React per frame. Di React Native, komponen memakai Animated dengan driver native untuk transform dan opasitas, dan driver JS hanya bila tata letak (lebar atau tinggi) berubah.

Kekhususan React Native

API-nya sama; ini perbedaan yang akan Anda lihat di perangkat.

• Angka dan teks mengalir tetap Text sungguhan, jadi pemilihan, pembungkusan baris, numberOfLines, dan aksesibilitas berperilaku seperti biasa.
• MotionSheet dan MotionZoom dirender dalam Modal transparan, dan tombol kembali menutupnya.
• ScrollView di dalam sheet mempertahankan gesturnya sendiri; sheet diseret dari pegangan dan area statisnya.
• MotionHold langsung mengonfirmasi dari aksi aksesibilitas activate.
• MotionSwap inline mengukur konten baru dalam satu baris; gunakan inline=— untuk konten yang membungkus.

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

Tata letak Anda tetap milik Anda

Komponen mempertahankan tata letak bawaan platform: metrik teks, pembungkusan baris, penskalaan font, batasan induk, dan gaya Anda. Gerak tidak pernah memaksakan lebar karakter, tinggi teks tetap, atau masker pemotongan pada teks Anda.

Apa yang diverifikasi di mana

Perilaku web diverifikasi di browser sungguhan. Perilaku React Native dicakup oleh test model bersama dan renderer tiruan, jadi periksa gestur dan tata letak di perangkat target Anda sebelum rilis.