React Native Academy · Lektion

Installation af Reanimated og shared values

Installér react-native-reanimated, tilføj Babel-plugin'et, opret shared values med useSharedValue, og forbind dem med animerede styles ved hjælp af useAnimatedStyle.

Lektion 1 af 413 trin

Installation af Reanimated og shared values er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvorfor Reanimated findes

React Native Reanimated er et mere kraftfuldt animationsbibliotek, der går videre end det, den indbyggede Animated API kan tilbyde. Hvor Animated API'en flytter animationskonfigurationen til native én gang og kører den dér, lader Reanimated dig køre vilkårlig JavaScript-lignende logik — kaldet worklets — direkte på UI-tråden, billede for billede.

Det muliggør gestusstyrede animationer, hvor animationen reagerer i realtid på fingerens position, hvilket ikke er muligt med Animated API'ens forudkonfigurerede tilgang. Reanimated 3 er den aktuelle version og udgør grundlaget for React Native Gesture Handlers jævne interaktioner.

Installation af react-native-reanimated

Installér Reanimated fra npm, og tilføj derefter Babel-plugin'et til babel.config.js. Babel-plugin'et transformerer worklet-funktioner på byggetidspunktet, så de kan køre på UI-tråden. Uden plugin'et vil biblioteket mislykkes lydløst under kørsel.

I Expo managed workflow skal biblioteket være kompatibelt med din SDK-version. Kontrollér Reanimateds kompatibilitetstabel, før du installerer. Efter installationen skal du bygge den native app igen — Reanimated kan ikke tilføjes via en OTA-opdatering.

// 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: Reanimateds grundlæggende værdi

useSharedValue er Reanimateds pendant til Animated.Value. Den opretter en værdi, der deles mellem JavaScript-tråden og UI-tråden, og som kan læses og skrives fra worklets, der kører på UI-tråden, uden at krydse broen.

I modsætning til useState udløser skrivning til en delt værdi IKKE en ny React-rendering. I stedet opdateres den animerede stil direkte på UI-tråden. Det er det, der muliggør jævn gestussporing — positionen kan opdateres mere end 60 gange i sekundet uden involvering af React.

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: Forbindelse af værdier med stile

useAnimatedStyle opretter et stilobjekt, der genberegnes på UI-tråden, når en delt værdi, som det læser, ændres. Du angiver en worklet-funktion, der returnerer et stilobjekt og læser delte værdier med .value. Forbind den returnerede stil med en ReanimatedView (importeret som Animated.View fra Reanimated).

Dette er forbindelsen mellem delte værdier og den synlige brugerflade. Stilfunktionen kører på UI-tråden, så den påvirker hverken 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-animationer

I stedet for at kalde Animated.timing på en delt værdi tildeler du den returværdien fra withTiming eller withSpring. Det er animationsfunktioner, der over tid driver den delte værdi mod en målværdi og evalueres på UI-tråden.

Tildelingen offset.value = withTiming(100) starter en jævn tidsbaseret animation. Tildelingen offset.value = withSpring(100) starter en fjederanimation. Denne tildelingssyntaks er enklere end Animated API'ens imperativt kaldte .start()-mønster.

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

Animering af opacity og scale

Delte værdier for opacity og scale fungerer på præcis samme måde — opret en delt værdi, opbyg en animeret stil med useAnimatedStyle, og tildel animationsfunktioner til værdien for at udløse overgange. Flere delte værdier kan kombineres i én useAnimatedStyle.

Den vigtigste fordel i forhold til Animated API er, at worklet-funktionen i useAnimatedStyle kører direkte sammen med gestushændelser på UI-tråden, hvilket muliggør perfekt jævn sporing i realtid.

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 worklets i useAnimatedStyle

Funktionen, der sendes til useAnimatedStyle, er en worklet — den kører på UI-tråden og ikke på JavaScript-tråden. Det betyder, at den ikke kan tilgå JavaScript-closures, importerede moduler eller React-tilstand direkte. Den kan kun tilgå delte værdier og primitive konstanter, der blev indfanget på definitionstidspunktet.

Reanimateds Babel-plugin transformerer worklet-funktionen, så den er sikker at køre på UI-tråden. Hvis du overtræder disse regler, vil du se kryptiske kørselsfejl. Hvis du er i tvivl, så test med en enkel transformation, før du tilføjer kompleksitet.

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

Kørsel af Reanimated med Expo Go

Reanimated kræver, at det native modul er kompileret ind i appens binære fil. I Expo managed workflow betyder det, at du skal bruge et udviklingsbuild (oprettet med npx expo run:android eller npx expo run:ios) i stedet for standardappen Expo Go, som ikke indeholder Reanimateds native modul.

Et nemt alternativ er at bruge Expos udviklingsklient (expo-dev-client), som er en tilpasningsbar Expo Go, der indeholder dine egne native moduler. Installér den, byg appen igen, og scan QR-koden for at få et udviklingsmiljø, der understø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
};

Kædning af animationer med withSequence

Reanimated tilbyder withSequence og withRepeat til at sammensætte animationer direkte i værditildelingen uden de separate Animated.sequence- eller Animated.loop-objekter. Syntaksen er mere kortfattet og funktionel.

withRepeat accepterer en animation, et antal gentagelser (−1 for uendeligt) og en boolesk værdi, der angiver, om retningen skal vendes. withSequence kæder flere animationsfaser sammen i rækkefø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
);

Læsning af delte værdier kontra React-tilstand

En vigtig mental model: delte værdier er ikke React-state. Når du skriver til offset.value, udløser det ikke en ny rendering. Brugerfladen opdateres direkte via animerede typografier. Hvis du har brug for at synkronisere en delt værdi med React-state (f.eks. for at vise betinget JSX), skal du bruge useAnimatedReaction eller runOnJS til at kalde en React-state-sætter fra brugerfladetråden.

Det er afgørende at forstå denne grænse — Reanimated fungerer uden for Reacts renderingscyklus — så du kan bruge det effektivt uden at introducere fejl.

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

Opsummering af Reanimated sammenlignet med Animated API

Hvornår du skal bruge de forskellige animationssystemer:

Animated API — Enkle indgangs- og udgangsanimationer, opacitetsindtoninger og forudkonfigurerede sekvenser. Har en lavere indlæringskurve, følger med React Native og er tilstrækkeligt til de fleste apps.
Reanimated — Gestusresponsive animationer, sporing i realtid og kompleks interaktiv fysik. Det er nødvendigt, når animationen skal reagere på gestussens aktuelle position fra billede til billede.

Mange apps i produktion bruger Animated API til enkle overgange i brugerfladen og kun Reanimated til gestusstyrede komponenter som kort, der kan stryges, bundpaneler og træk-og-slip.

Hurtigt tjek

Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion har du lært: useSharedValue opretter en værdi, der deles mellem JS- og brugerfladetrådene, så animationer kan køre uden omkostninger ved broen, useAnimatedStyle forbinder delte værdier med komponenttypografier via en worklet på brugerfladetråden, og withTiming og withSpring tildeles til sharedValue.value for at starte animationer. Derefter undersøger vi worklets, og hvordan de gør det muligt at køre kompleks gestuslogik udelukkende på brugerfladetråden.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 30
Lektioner: 120

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Installation af Reanimated og shared values” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Installation af Reanimated og shared values”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Installation af Reanimated og shared values”?

Installér react-native-reanimated, tilføj Babel-plugin'et, opret shared values med useSharedValue, og forbind dem med animerede styles ved hjælp af useAnimatedStyle. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Native Academy?

Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Installation af Reanimated og shared values”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Native Academy-lektion?

Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Installation af Reanimated og shared values
Worklets og kørsel af kode på UI-tråden
Pan- og swipe-bevægelser med Gesture Handler
Pinch-to-zoom og rotation

← Tilbage til React Native Academy