வலையும் React Native-உம்

அதே import

ஒரு தொகுப்பை நிறுவி இரண்டு தளங்களிலும் அதன் வேரிலிருந்து import செய்யுங்கள். React மட்டுமே கட்டாய peer; நேட்டிவ் ஆப்களுக்கு React Native விருப்ப peer. எந்தத் தளத்துக்கும் Provider, wrapper, அமைப்பு அழைப்பு தேவையில்லை.

// 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-இல் ரெண்டர் ஆகின்றன; பின் பொத்தான் அவற்றை மூடுகிறது.
• Sheet-க்குள் உள்ள ScrollView-கள் தங்கள் சைகைகளை வைத்திருக்கின்றன; sheet அதன் கைப்பிடி, நிலையான பகுதிகளால் இழுக்கப்படுகிறது.
• 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>
  );
}

உங்கள் லேஅவுட் உங்களுடையதே

கம்போனென்ட்கள் தளத்தின் சொந்த லேஅவுட்டை வைத்திருக்கின்றன: உரை அளவீடுகள், மடிப்பு, எழுத்துரு அளவு மாற்றம், பெற்றோர் கட்டுப்பாடுகள், உங்கள் style-கள். மோஷன் உங்கள் உரையின் மீது எழுத்து அகலம், நிலையான உரை உயரம் அல்லது வெட்டு மாஸ்க்கை ஒருபோதும் திணிப்பதில்லை.

எது எங்கே சரிபார்க்கப்படுகிறது

வலை நடத்தை உண்மையான உலாவிகளில் சரிபார்க்கப்படுகிறது. React Native நடத்தை பகிரப்பட்ட மாதிரிகளின் சோதனைகளாலும் போலி ரெண்டரராலும் உள்ளடக்கப்படுகிறது; அதனால் வெளியீட்டுக்கு முன் உங்கள் இலக்குச் சாதனங்களில் சைகைகளையும் லேஅவுட்டையும் சரிபாருங்கள்.