वेब और 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 में कंपोनेंट transform और अपारदर्शिता के लिए नेटिव 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 का व्यवहार साझा मॉडल और नक़ली रेंडरर के टेस्ट से कवर होता है, इसलिए रिलीज़ से पहले अपने लक्षित डिवाइस पर जेस्चर और लेआउट जाँचें।