ವೆಬ್ ಮತ್ತು 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 ನಡವಳಿಕೆಯನ್ನು ಹಂಚಿಕೊಂಡ ಮಾದರಿಗಳ ಪರೀಕ್ಷೆಗಳು ಮತ್ತು ಅನುಕರಣಾ ರೆಂಡರರ್ ಒಳಗೊಳ್ಳುತ್ತವೆ, ಹೀಗಾಗಿ ಬಿಡುಗಡೆಗೆ ಮೊದಲು ನಿಮ್ಮ ಗುರಿ ಸಾಧನಗಳಲ್ಲಿ ಸನ್ನೆಗಳು ಮತ್ತು ಲೇಔಟ್ ಪರಿಶೀಲಿಸಿ.