React Native Academy · Oppitunti

Reanimatedin ja jaettujen arvojen asentaminen

Asentakaa react-native-reanimated, lisätkää Babel-plugin, luokaa jaettuja arvoja useSharedValuella ja yhdistäkää ne animoituihin tyyleihin useAnimatedStylen avulla.

Oppitunti 1/413 vaihetta

Reanimatedin ja jaettujen arvojen asentaminen on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Miksi Reanimated on olemassa

React Native Reanimated on tehokkaampi animaatiokirjasto, joka tarjoaa enemmän mahdollisuuksia kuin sisäänrakennettu Animated API. Animated API siirtää animaation asetukset kerran natiivipuolelle ja suorittaa animaation siellä, kun taas Reanimated mahdollistaa JavaScriptin kaltaisen mielivaltaisen logiikan — workletien — suorittamisen suoraan UI-säikeessä ruutu kerrallaan.

Tämä mahdollistaa eleohjatut animaatiot, joissa animaatio reagoi sormen sijaintiin reaaliajassa. Se ei ole mahdollista Animated APIn ennalta määritettyyn lähestymistapaan perustuen. Reanimated 3 on nykyinen versio ja React Native Gesture Handlerin sulavien vuorovaikutusten perusta.

react-native-reanimatedin asentaminen

Asentakaa Reanimated npm:stä ja lisätkää sitten Babel-laajennus tiedostoon babel.config.js. Babel-laajennus muuntaa worklet-funktiot koontivaiheessa, jotta ne voivat toimia UI-säikeessä. Ilman laajennusta kirjasto lakkaa toimimasta ajon aikana ilman erillistä ilmoitusta.

Expon hallinnoidussa työnkulussa kirjaston on oltava yhteensopiva SDK-versionne kanssa. Tarkistakaa Reanimatedin yhteensopivuustaulukko ennen asentamista. Asennuksen jälkeen natiivisovellus on koottava uudelleen — Reanimatedia ei voi lisätä OTA-päivityksellä.

// Terminal:
// npx expo install react-native-reanimated

// babel.config.js:
module.exports = {
  presets: ['babel-preset-expo'],
  plugins: ['react-native-reanimated/plugin'],
};

// IMPORTANT: Reanimated plugin must be listed LAST

useSharedValue: Reanimatedin perusprimitiivi

useSharedValue vastaa Reanimatedissa Animated.Value-arvoa. Se luo arvon, joka jaetaan JavaScript-säikeen ja UI-säikeen välillä ja jota voidaan lukea ja kirjoittaa UI-säikeessä toimivista workleteistä ilman sillan ylittämistä.

Toisin kuin useState-koukku, jaetun arvon kirjoittaminen EI käynnistä Reactin uudelleenrenderöintiä. Sen sijaan se päivittää animoidun tyylin suoraan UI-säikeessä. Tämä mahdollistaa eleiden sulavan seurannan — sijainnin päivittämisen yli 60 kertaa sekunnissa ilman Reactin osallistumista.

import { useSharedValue } from 'react-native-reanimated';
import { useEffect } from 'react';

export default function MyComponent() {
  const offset = useSharedValue(0);
  const opacity = useSharedValue(1);

  // Read the value: offset.value
  // Write to it: offset.value = 100
}

useAnimatedStyle: arvojen yhdistäminen tyyleihin

useAnimatedStyle luo tyyliobjektin, joka lasketaan uudelleen UI-säikeessä aina, kun jokin sen lukema jaettu arvo muuttuu. Välitätte sille worklet-funktion, joka palauttaa tyyliobjektin ja lukee jaettuja arvoja ominaisuudella .value. Yhdistäkää palautettu tyyli ReanimatedView-komponenttiin (tuodaan Reanimatedista nimellä Animated.View).

Tämä yhdistää jaetut arvot näkyvään käyttöliittymään. Tyylifunktio suoritetaan UI-säikeessä, joten se ei vaikuta Reactin renderöintiin tai JavaScript-säikeeseen.

import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

export default function Box() {
  const offset = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  return <Animated.View style={[styles.box, animatedStyles]} />;
}

withTiming- ja withSpring-animaatiot

Sen sijaan että kutsuisitte Animated.timing-metodia jaetulle arvolle, määritätte sille withTiming- tai withSpring-funktion palauttaman arvon. Nämä animaatiofunktiot ohjaavat jaettua arvoa kohti kohdearvoa ajan kuluessa ja suoritetaan UI-säikeessä.

Arvon offset.value = withTiming(100) määrittäminen käynnistää sulavan ajoitusanimaation. Arvon offset.value = withSpring(100) määrittäminen käynnistää jousianimaation. Tämä määrityssyntaksi on yksinkertaisempi kuin Animated APIn pakottava .start()-malli.

import { useSharedValue, withTiming, withSpring } from 'react-native-reanimated';

const offset = useSharedValue(0);

// Trigger a timing animation:
function moveRight() {
  offset.value = withTiming(200, { duration: 500 });
}

// Trigger a spring:
function springRight() {
  offset.value = withSpring(200, { damping: 15, stiffness: 100 });
}

Opacity- ja scale-arvojen animointi

Opacity- ja scale-arvot toimivat samalla tavalla: luotte jaetun arvon, muodostatte animoidun tyylin useAnimatedStyle-koukulla ja määritätte arvolle animaatiofunktioita siirtymien käynnistämiseksi. Useita jaettuja arvoja voidaan yhdistää yhdessä useAnimatedStyle-kutsussa.

Keskeinen etu Animated APIin verrattuna on se, että useAnimatedStyle-funktion worklet suoritetaan UI-säikeessä samanaikaisesti tapahtumien kanssa, mikä mahdollistaa täysin sulavan reaaliaikaisen seurannan.

const scale = useSharedValue(1);
const opacity = useSharedValue(0);

const style = useAnimatedStyle(() => ({
  opacity: opacity.value,
  transform: [{ scale: scale.value }],
}));

// Animate on press:
function press() {
  scale.value = withSpring(0.9);
  opacity.value = withTiming(0.7, { duration: 150 });
}

function release() {
  scale.value = withSpring(1);
  opacity.value = withTiming(1, { duration: 150 });
}

useAnimatedStyle-workletin säännöt

useAnimatedStyle-kutsulle välitettävä funktio on worklet — se suoritetaan UI-säikeessä, ei JavaScript-säikeessä. Siksi se ei voi käyttää JavaScriptin sulkeumia, tuotuja moduuleja tai React-tilaa suoraan. Se voi käyttää vain jaettuja arvoja sekä määrittelyhetkellä talteen otettuja primitiivisiä vakioita.

Reanimatedin Babel-laajennus muuntaa worklet-funktion UI-säikeessä turvallisesti suoritettavaan muotoon. Jos rikotte näitä sääntöjä, näette vaikeaselkoisia ajonaikaisia virheitä. Jos olette epävarmoja, testatkaa ensin yksinkertaisella muunnoksella ennen monimutkaisuuden lisäämistä.

const offset = useSharedValue(0);
const MULTIPLIER = 2; // primitives captured OK

// CORRECT: only reads sharedValue and primitive
const style = useAnimatedStyle(() => ({
  transform: [{ translateX: offset.value * MULTIPLIER }],
}));

// WRONG: accessing React state would throw
// const [reactState] = useState(0);
// const badStyle = useAnimatedStyle(() => ({
//   opacity: reactState, // cannot read React state in worklet
// }));

Reanimatedin käyttäminen Expo Gon kanssa

Reanimated edellyttää, että natiivimoduuli käännetään sovelluksen binääritiedostoon. Expon hallinnoidussa työnkulussa tämä tarkoittaa, että tarvitsette kehitysversion (luodaan komennoilla npx expo run:android tai npx expo run:ios) tavallisen Expo Go -sovelluksen sijaan, sillä Expo Go ei sisällä Reanimatedin natiivimoduulia.

Helppo vaihtoehto on käyttää Expon kehitysasiakasta (expo-dev-client), joka on mukautettava Expo Go ja sisältää omat natiivimoduulinne. Asentakaa se, kootkaa sovellus uudelleen ja skannatkaa QR-koodi saadaksenne Reanimatedia tukevan kehitysympäristön.

// Install expo-dev-client for Reanimated support:
// npx expo install expo-dev-client
// npx expo run:ios   (or run:android)

// Then in babel.config.js ensure:
module.exports = {
  presets: ['babel-preset-expo'],
  plugins: ['react-native-reanimated/plugin'], // must be last
};

Animaatioiden ketjuttaminen withSequence-toiminnolla

Reanimated tarjoaa withSequence- ja withRepeat-funktiot animaatioiden koostamiseen suoraan arvon määrityksessä ilman erillisiä Animated.sequence- tai Animated.loop-objekteja. Syntaksi on tiiviimpi ja funktionaalisempi.

withRepeat hyväksyy animaation, toistokertojen määrän (−1 tarkoittaa rajatonta toistoa) ja totuusarvon suunnan kääntämistä varten. withSequence ketjuttaa useita animaatiovaiheita järjestyksessä.

import { withTiming, withSpring, withSequence, withRepeat } from 'react-native-reanimated';

// Shake animation: left, right, center
offset.value = withSequence(
  withTiming(-10, { duration: 100 }),
  withTiming(10, { duration: 100 }),
  withTiming(0, { duration: 100 })
);

// Pulse animation (infinite):
opacity.value = withRepeat(
  withTiming(0.3, { duration: 600 }),
  -1, // repeat forever
  true // reverse each cycle
);

Jaettujen arvojen lukeminen verrattuna React-tilaan

Tärkeä ajatusmalli: jaetut arvot eivät ole React-tilaa. Arvon offset.value muuttaminen ei aiheuta uudelleenrenderöintiä. Käyttöliittymä päivittyy suoraan animoitujen tyylien kautta. Jos jaettu arvo on synkronoitava React-tilan kanssa (esimerkiksi ehdollisen JSX:n renderöimiseksi), käytä useAnimatedReaction-koukkua tai runOnJS-funktiota kutsuaksesi React-tilan päivitintä käyttöliittymäsäikeestä.

Tämän rajan ymmärtäminen — Reanimated toimii Reactin renderöintisyklin ulkopuolella — on avain sen tehokkaaseen käyttöön ilman virheitä.

import { useAnimatedReaction, runOnJS } from 'react-native-reanimated';

const [isVisible, setIsVisible] = React.useState(true);
const opacity = useSharedValue(1);

// React to shared value changes on JS thread:
useAnimatedReaction(
  () => opacity.value,
  (current) => {
    if (current === 0) runOnJS(setIsVisible)(false);
  }
);

Reanimated ja Animated API – yhteenveto

Milloin kumpaakin animaatiojärjestelmää kannattaa käyttää:

Animated API — Yksinkertaiset sisääntulo- ja poistumisanimaatiot, opacity-häivytykset ja ennalta määritetyt sekvenssit. Oppimiskynnys on matalampi, se toimitetaan React Nativen mukana ja riittää useimpiin sovelluksiin.
Reanimated — Eleisiin reagoivat animaatiot, reaaliaikainen seuranta ja monimutkainen interaktiivinen fysiikka. Sitä tarvitaan, kun animaation on reagoitava eleen reaaliaikaiseen sijaintiin ruutu ruudulta.

Monissa tuotantosovelluksissa käytetään Animated API:a yksinkertaisiin käyttöliittymän siirtymiin ja Reanimatedia vain eleohjattuihin komponentteihin, kuten pyyhkäistäviin kortteihin, alhaalta avautuviin paneeleihin ja vedä ja pudota -toimintoihin.

Pikatesti

Testaa, miten hyvin ymmärrät tässä oppitunnissa käsitellyt React Native -mobiilikehityksen käsitteet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin kertaus

Tässä oppitunnissa opit, että useSharedValue luo JS- ja käyttöliittymäsäikeen välillä jaetun arvon animaatioita varten ilman sillan aiheuttamaa lisäkustannusta, useAnimatedStyle yhdistää jaetut arvot komponentin tyyleihin käyttöliittymäsäikeessä suoritettavan workletin avulla ja withTiming sekä withSpring määritetään sharedValue.value-arvolle animaatioiden käynnistämiseksi. Seuraavaksi tutustumme workleteihin ja siihen, miten niiden avulla voidaan suorittaa monimutkainen elelogiikka kokonaan käyttöliittymäsäikeessä.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Reanimatedin ja jaettujen arvojen asentaminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Reanimatedin ja jaettujen arvojen asentaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Reanimatedin ja jaettujen arvojen asentaminen”?

Asentakaa react-native-reanimated, lisätkää Babel-plugin, luokaa jaettuja arvoja useSharedValuella ja yhdistäkää ne animoituihin tyyleihin useAnimatedStylen avulla. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Reanimatedin ja jaettujen arvojen asentaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Reanimatedin ja jaettujen arvojen asentaminen
Workletit ja koodin suorittaminen käyttöliittymäsäikeessä
Pan- ja pyyhkäisyeleet Gesture Handlerilla
Nipistyszoomaus ja kierto

← Takaisin: React Native Academy