אינטרנט ו־React Native

אותו ייבוא

התקינו חבילה אחת וייבאו מהשורש שלה בשתי הפלטפורמות. 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 עם ה־driver הנייטיב ל־transform ול־opacity, וב־driver של JS רק כשהפריסה (רוחב או גובה) משתנה.

פרטים ייחודיים ל־React Native

ה־API זהה; אלה ההבדלים שתשימו לב אליהם במכשיר.

• מספרים וטקסט בזרימה נשארים Text אמיתי, כך שסימון, שבירת שורות, numberOfLines ונגישות מתנהגים כרגיל.
• MotionSheet ו־MotionZoom מרונדרים ב־Modal שקוף, וכפתור החזרה סוגר אותם.
• רכיבי ScrollView פנימיים בגיליון שומרים על המחוות שלהם; גוררים את הגיליון מהידית ומהאזורים הסטטיים.
• MotionHold מאשר ישירות מפעולת ההפעלה של הנגישות.
• 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 מדומה, אז בדקו מחוות ופריסה במכשירי היעד לפני שחרור.