เว็บและ React Native

import เดียวกัน

ติดตั้งแพ็กเกจเดียวและ import จากรากของมันในทั้งสองแพลตฟอร์ม 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 กับ native driver สำหรับ transform และความทึบ และใช้ JS driver เฉพาะเมื่อเลย์เอาต์ (ความกว้างหรือความสูง) เปลี่ยน

รายละเอียดเฉพาะของ React Native

API เหมือนกัน นี่คือความต่างที่คุณจะสังเกตเห็นบนอุปกรณ์

• ตัวเลขและข้อความสตรีมยังเป็น Text จริง การเลือก การตัดบรรทัด numberOfLines และการเข้าถึงจึงทำงานตามปกติ
• MotionSheet และ MotionZoom เรนเดอร์ใน Modal โปร่งใส และปุ่มย้อนกลับปิดได้
• ScrollView ภายในชีตรักษาท่าทางของตัวเอง ชีตจึงลากได้จากที่จับและพื้นที่คงที่
• MotionHold ยืนยันทันทีจากการกระทำ activate เพื่อการเข้าถึง
• MotionSwap แบบ inline วัดเนื้อหาใหม่ในบรรทัดเดียว ใช้ 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 ครอบคลุมด้วยการทดสอบโมเดลที่ใช้ร่วมกันและ renderer จำลอง จึงควรตรวจท่าทางและเลย์เอาต์บนอุปกรณ์เป้าหมายก่อนออกรุ่น