వెబ్, 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 ప్రవర్తన పంచుకున్న మోడల్‌ల టెస్టులు, మాక్ రెండరర్‌తో కవర్ చేయబడుతుంది; అందువల్ల విడుదలకు ముందు మీ లక్ష్య పరికరాలపై సంజ్ఞలను, లేఅవుట్‌ను తనిఖీ చేయండి.