الويب وReact Native

الاستيراد نفسه

ثبّت حزمة واحدة واستورد من جذرها على المنصتين. React هي التبعية النظيرة الإلزامية الوحيدة؛ وReact Native تبعية نظيرة اختيارية للتطبيقات الأصلية. لا تحتاج أي منصة إلى 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 فتغطيه اختبارات للنماذج المشتركة ومُصيِّر محاكى، لذا تحقّق من الإيماءات والتخطيط على أجهزتك المستهدفة قبل الإصدار.