Web και React Native

Το ίδιο import

Εγκαταστήστε ένα πακέτο και εισαγάγετε από τη ρίζα του και στις δύο πλατφόρμες. Το React είναι το μόνο υποχρεωτικό peer· το React Native είναι προαιρετικό peer για native εφαρμογές. Καμία πλατφόρμα δεν χρειάζεται 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 τα components παίζονται στο Web Animations API με ελατήρια αναλυτικής δειγματοληψίας, οπότε δεν φορτώνεται βιβλιοθήκη κίνησης και δεν υπάρχει απόδοση React ανά καρέ. Στο React Native τα components χρησιμοποιούν Animated με τον native driver για μετασχηματισμούς και αδιαφάνεια, και τον JS driver μόνο όπου αλλάζει η διάταξη (πλάτος ή ύψος).

Ιδιαιτερότητες του React Native

Το API είναι το ίδιο· αυτές είναι οι διαφορές που θα παρατηρήσετε στη συσκευή.

• Οι αριθμοί και το κείμενο σε ροή μένουν πραγματικό Text, οπότε η επιλογή, η αναδίπλωση, το numberOfLines και η προσβασιμότητα συμπεριφέρονται κανονικά.
• Τα MotionSheet και MotionZoom αποδίδονται σε διαφανές Modal και το κουμπί επιστροφής τα κλείνει.
• Τα εσωτερικά ScrollView ενός sheet κρατούν τις δικές τους χειρονομίες· το sheet σύρεται από τη λαβή και τις στατικές περιοχές του.
• Το MotionHold επιβεβαιώνει απευθείας από την ενέργεια ενεργοποίησης προσβασιμότητας.
• Το 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>
  );
}

Η διάταξή σας μένει δική σας

Τα components κρατούν τη διάταξη της ίδιας της πλατφόρμας: μετρικές κειμένου, αναδίπλωση, κλιμάκωση γραμματοσειράς, περιορισμούς του γονέα και τα στυλ σας. Η κίνηση δεν επιβάλλει ποτέ στο κείμενό σας πλάτος χαρακτήρα, σταθερό ύψος κειμένου ή μάσκα αποκοπής.

Τι επαληθεύεται πού

Η συμπεριφορά στο web επαληθεύεται σε πραγματικά προγράμματα περιήγησης. Η συμπεριφορά στο React Native καλύπτεται από τεστ των κοινών μοντέλων και ενός προσομοιωμένου renderer, οπότε ελέγξτε χειρονομίες και διάταξη στις συσκευές-στόχους πριν από μια κυκλοφορία.