React Native Academy · leksjon

Installere Reanimated og delte verdier

Installer react-native-reanimated, legg til Babel-pluginen, opprett delte verdier med useSharedValue, og koble dem til animerte stiler med useAnimatedStyle.

Leksjon 1 av 413 trinn

Installere Reanimated og delte verdier er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hvorfor Reanimated finnes

React Native Reanimated er et kraftigere animasjonsbibliotek som går lenger enn det den innebygde Animated API kan oppnå. Mens Animated API flytter animasjonskonfigurasjonen til native én gang og kjører den der, lar Reanimated Dem kjøre vilkårlig JavaScript-lignende logikk – kalt worklets – direkte på UI-tråden, frame for frame.

Dette muliggjør geststyrte animasjoner der animasjonen reagerer i sanntid på fingerens posisjon, noe som ikke er mulig med Animated API sin forhåndskonfigurerte tilnærming. Reanimated 3 er den gjeldende versjonen og danner grunnlaget for de jevne interaksjonene i React Native Gesture Handler.

Installere react-native-reanimated

Installer Reanimated fra npm, og legg deretter til Babel-pluginen i babel.config.js. Babel-pluginen transformerer worklet-funksjoner ved bygging, slik at de kan kjøre på UI-tråden. Uten pluginen vil biblioteket mislykkes stille ved kjøring.

For Expo managed workflow må biblioteket være kompatibelt med SDK-versjonen Deres. Sjekk kompatibilitetstabellen for Reanimated før De installerer. Etter installasjonen må De bygge den native appen på nytt – Reanimated kan ikke legges til via en OTA-oppdatering.

// 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: Reanimated-primitiven

useSharedValue er Reanimateds tilsvarende konstruksjon til Animated.Value. Den oppretter en verdi som deles mellom JavaScript-tråden og UI-tråden, og som kan leses og skrives fra worklets som kjører på UI-tråden, uten å krysse broen.

I motsetning til useState utløser skriving til en shared value IKKE en ny React-rendering. I stedet oppdateres den animerte stilen direkte på UI-tråden. Det er dette som muliggjør jevn gestsporing – posisjonen kan oppdateres mer enn 60 ganger i sekundet uten at React involveres.

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: Koble verdier til stiler

useAnimatedStyle oppretter et style-objekt som beregnes på nytt på UI-tråden hver gang en shared value det leser, endres. De sender inn en worklet-funksjon som returnerer et style-objekt, og leser shared values med .value. Koble den returnerte stilen til en ReanimatedView (importert som Animated.View fra Reanimated).

Dette er forbindelsen mellom shared values og det synlige brukergrensesnittet. Stilfunksjonen kjører på UI-tråden, så den påvirker ikke React-rendering eller JavaScript-tråden.

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- og withSpring-animasjoner

I stedet for å kalle Animated.timing på en shared value tilordner De returverdien fra withTiming eller withSpring til den. Dette er animasjonsfunksjoner som driver shared value mot en målverdi over tid, evaluert på UI-tråden.

Tilordningen offset.value = withTiming(100) starter en jevn timing-animasjon. Tilordningen offset.value = withSpring(100) starter en spring-animasjon. Denne tilordningssyntaksen er enklere enn det imperative .start()-mønsteret i Animated API.

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 });
}

Animere opacity og scale

Shared values for opacity og scale fungerer på nøyaktig samme måte – opprett en shared value, bygg en animert stil med useAnimatedStyle, og tilordne animasjonsfunksjoner til verdien for å utløse overganger. Flere shared values kan kombineres i én enkelt useAnimatedStyle.

Den viktigste fordelen sammenlignet med Animated API er at worklet-funksjonen i useAnimatedStyle kjører direkte sammen med gesthendelser på UI-tråden, noe som muliggjør perfekt jevn sporing i sanntid.

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 });
}

Regler for useAnimatedStyle-worklets

Funksjonen som sendes til useAnimatedStyle, er en worklet – den kjører på UI-tråden, ikke JavaScript-tråden. Det betyr at den ikke kan aksessere JavaScript-closures, importerte moduler eller React-tilstand direkte. Den kan bare aksessere shared values og primitive konstanter som ble fanget inn da funksjonen ble definert.

Reanimateds Babel-plugin transformerer worklet-funksjonen slik at den blir trygg å kjøre på UI-tråden. Hvis De bryter disse reglene, får De kryptiske feil ved kjøring. Test med en enkel transformasjon før De legger til mer kompleksitet hvis De er i tvil.

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
// }));

Kjøre Reanimated med Expo Go

Reanimated krever at den native modulen er kompilert inn i appens binærfil. I Expo managed workflow betyr det at De trenger en development build (opprettet med npx expo run:android eller npx expo run:ios) i stedet for standardappen Expo Go, som ikke inkluderer Reanimateds native modul.

Et enkelt alternativ er å bruke Expo's development client (expo-dev-client), som er en tilpassbar Expo Go som inkluderer Deres egne native moduler. Installer den, bygg på nytt og skann QR-koden for å få et utviklingsmiljø som støtter Reanimated.

// 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
};

Kjede animasjoner med withSequence

Reanimated tilbyr withSequence og withRepeat for å sette sammen animasjoner direkte i verdi-tilordningen, uten separate Animated.sequence- eller Animated.loop-objekter. Syntaksen er mer kortfattet og funksjonell.

withRepeat tar imot en animasjon, et antall repetisjoner (−1 for uendelig) og en boolsk verdi som angir om retningen skal reverseres. withSequence kobler flere animasjonsfaser sammen i rekkefølge.

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
);

Lese shared values sammenlignet med React-tilstand

En viktig mental modell: delte verdier er ikke React-tilstand. Skriving til offset.value utløser ikke en ny rendering. UI-et oppdateres direkte via animerte stiler. Hvis De trenger å synkronisere en delt verdi med React-tilstand (for eksempel for å rendre betinget JSX), kan De bruke useAnimatedReaction eller runOnJS for å kalle en setter for React-tilstand fra UI-tråden.

Det er avgjørende å forstå dette skillet – Reanimated kjører utenfor Reacts renderingssyklus – for å kunne bruke det effektivt uten å introdusere feil.

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);
  }
);

Sammendrag: Reanimated og Animated API

Når De bør bruke hvert av animasjonssystemene:

Animated API – Enkle inn- og utgangsanimasjoner, uttoning av gjennomsiktighet og forhåndskonfigurerte sekvenser. Lavere læringsterskel, leveres med React Native og er tilstrekkelig for de fleste apper.
Reanimated – Geststyrte animasjoner, sporing i sanntid og kompleks interaktiv fysikk. Nødvendig når animasjonen må reagere på den aktive gestposisjonen bilde for bilde.

Mange produksjonsapper bruker Animated API for enkle UI-overganger og Reanimated bare for geststyrte komponenter, som kort som kan sveipes, bunnpaneler og dra-og-slipp.

Kort sjekk

Test forståelsen Deres av konseptene innen React Native Mobile Development fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen har De lært at useSharedValue oppretter en verdi som deles mellom JS- og UI-trådene, for animasjoner uten kostnader knyttet til bridgen, at useAnimatedStyle kobler delte verdier til komponentstiler via en worklet på UI-tråden, og at withTiming og withSpring tilordnes sharedValue.value for å starte animasjoner. Neste tema er worklets og hvordan de gjør det mulig å kjøre kompleks gestlogikk utelukkende på UI-tråden.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Installere Reanimated og delte verdier» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Installere Reanimated og delte verdier», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Installere Reanimated og delte verdier»?

Installer react-native-reanimated, legg til Babel-pluginen, opprett delte verdier med useSharedValue, og koble dem til animerte stiler med useAnimatedStyle. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Native Academy?

Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Installere Reanimated og delte verdier»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?

Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Installere Reanimated og delte verdier
Worklets og kjøring av kode på UI-tråden
Panorerings- og sveipebevegelser med Gesture Handler
Knip-for-å-zoome og rotere

← Tilbake til React Native Academy