वेब आणि 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} />
    </>
  );
}

मोशन कसे चालते

वेबवर कंपोनंट विश्लेषणात्मक पद्धतीने नमुने घेतलेल्या spring सह Web Animations API वर चालतात, त्यामुळे लोड करायची ॲनिमेशन लायब्ररी नाही आणि प्रति फ्रेम React रेंडर नाही. React Native वर कंपोनंट transform आणि opacity साठी नेटिव्ह driver सह Animated वापरतात, आणि लेआउट (रुंदी किंवा उंची) बदलतो तिथेच JS driver.

React Native ची वैशिष्ट्ये

API तेच आहे; उपकरणावर तुम्हाला जाणवणारे फरक हे आहेत.

• संख्या आणि स्ट्रीम मजकूर खरा Text राहतात, त्यामुळे निवड, गुंडाळणे, numberOfLines आणि सुलभता नेहमीप्रमाणे चालतात.
• MotionSheet आणि MotionZoom पारदर्शक Modal मध्ये रेंडर होतात, आणि मागे बटण त्यांना बंद करते.
• शीटमधील आतील ScrollView त्यांचे स्वतःचे हावभाव राखतात; शीट तिच्या हँडल आणि स्थिर भागांतून ओढली जाते.
• MotionHold सुलभता activate क्रियेतून थेट निश्चित करतो.
• Inline 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 वर्तन सामायिक मॉडेलच्या चाचण्या आणि नक्कली रेंडररने समाविष्ट केले जाते, त्यामुळे प्रकाशनापूर्वी तुमच्या लक्ष्य उपकरणांवर हावभाव आणि लेआउट तपासा.