Web và React Native

Cùng một import

Cài một gói và import từ gốc của nó trên cả hai nền tảng. React là peer bắt buộc duy nhất; React Native là peer tùy chọn cho ứng dụng native. Không nền tảng nào cần provider, lớp bọc hay lời gọi thiết lập.

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

Chuyển động được phát thế nào

Trên web, component phát bằng Web Animations API với lò xo được lấy mẫu giải tích, nên không cần tải thư viện hoạt ảnh và không render React mỗi khung hình. Trên React Native, component dùng Animated với native driver cho transform và độ mờ, và chỉ dùng JS driver khi bố cục (chiều rộng hoặc chiều cao) thay đổi.

Đặc thù của React Native

API giống nhau; đây là những khác biệt bạn sẽ thấy trên thiết bị.

• Số và văn bản truyền dần vẫn là Text thật, nên việc chọn, xuống dòng, numberOfLines và trợ năng hoạt động như thường.
• MotionSheet và MotionZoom render trong một Modal trong suốt, và nút quay lại sẽ đóng chúng.
• Các ScrollView trong sheet giữ cử chỉ riêng; sheet được kéo từ tay cầm và các vùng tĩnh.
• MotionHold xác nhận ngay từ thao tác trợ năng activate.
• MotionSwap inline đo nội dung mới trên một dòng; hãy dùng inline=— cho nội dung xuống dòng.

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

Bố cục của bạn vẫn là của bạn

Component giữ bố cục riêng của nền tảng: số đo văn bản, xuống dòng, co giãn phông chữ, ràng buộc của phần tử cha và kiểu dáng của bạn. Chuyển động không bao giờ áp đặt độ rộng ký tự, chiều cao văn bản cố định hay mặt nạ cắt lên văn bản của bạn.

Cái gì được kiểm chứng ở đâu

Hành vi trên web được kiểm chứng trong trình duyệt thật. Hành vi trên React Native được bao phủ bởi test của các mô hình dùng chung và một renderer giả lập, nên hãy kiểm tra cử chỉ và bố cục trên thiết bị đích trước khi phát hành.