React Native Academy · Pelajaran

Memasang Reanimated dan Nilai Dikongsi

Pasang react-native-reanimated, tambahkan pemalam Babel, cipta nilai dikongsi dengan useSharedValue, dan sambungkannya kepada gaya beranimasi menggunakan useAnimatedStyle.

Pelajaran 1 daripada 413 langkah

Memasang Reanimated dan Nilai Dikongsi ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Sebab Reanimated Diwujudkan

React Native Reanimated ialah pustaka animasi yang lebih berkuasa dan melangkaui kemampuan API Animated terbina dalam. API Animated memindahkan konfigurasi animasi kepada bahagian asli sekali dan menjalankannya di situ, manakala Reanimated membolehkan anda menjalankan logik seperti JavaScript yang sewenang-wenangnya — dipanggil fungsi kerja — secara terus pada utas UI, bingkai demi bingkai.

Ini membolehkan animasi dipacu gerak isyarat yang bertindak balas terhadap kedudukan jari dalam masa nyata, sesuatu yang mustahil dengan pendekatan prakonfigurasi API Animated. Reanimated 3 ialah versi semasa dan menjadi asas kepada interaksi lancar React Native Gesture Handler.

Memasang react-native-reanimated

Pasang Reanimated daripada npm, kemudian tambahkan pemalam Babel pada babel.config.js. Pemalam Babel mengubah fungsi kerja semasa binaan supaya fungsi tersebut boleh dijalankan pada utas UI. Tanpa pemalam ini, pustaka tersebut akan gagal secara senyap semasa masa jalan.

Untuk aliran kerja terurus Expo, pustaka tersebut mestilah serasi dengan versi SDK anda. Semak jadual keserasian Reanimated sebelum memasangnya. Selepas pemasangan, anda mesti membina semula aplikasi asli — Reanimated tidak boleh ditambahkan melalui kemas kini OTA.

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

useSharedValue ialah padanan Reanimated untuk Animated.Value. Ia mencipta nilai yang dikongsi antara utas JavaScript dan utas UI, serta boleh dibaca dan ditulis daripada fungsi kerja yang berjalan pada utas UI tanpa merentasi jambatan.

Tidak seperti useState, penulisan pada nilai dikongsi TIDAK mencetuskan pemaparan semula React. Sebaliknya, tindakan ini mengemas kini gaya beranimasi secara terus pada utas UI. Inilah yang membolehkan penjejakan gerak isyarat yang lancar — mengemas kini kedudukan lebih daripada 60 kali sesaat tanpa penglibatan 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: Menghubungkan Nilai dengan Gaya

useAnimatedStyle mencipta objek gaya yang dikira semula pada utas UI setiap kali mana-mana nilai dikongsi yang dibacanya berubah. Anda memberikan fungsi kerja yang mengembalikan objek gaya, dengan membaca nilai dikongsi menggunakan .value. Hubungkan gaya yang dikembalikan kepada ReanimatedView (diimport sebagai Animated.View daripada Reanimated).

Inilah penghubung antara nilai dikongsi dengan UI yang kelihatan. Fungsi gaya berjalan pada utas UI, jadi ia tidak memberi kesan langsung terhadap pemaparan React atau utas JavaScript.

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

Animasi withTiming dan withSpring

Daripada memanggil Animated.timing pada nilai dikongsi, anda menetapkan nilai tersebut kepada hasil yang dikembalikan oleh withTiming atau withSpring. Ini ialah fungsi animasi yang menggerakkan nilai dikongsi ke arah nilai sasaran dari semasa ke semasa, dan dinilai pada utas UI.

Menetapkan offset.value = withTiming(100) memulakan animasi pemasaan yang lancar. Menetapkan offset.value = withSpring(100) memulakan animasi spring. Sintaks penetapan ini lebih ringkas berbanding pola .start() imperatif API Animated.

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

Menganimasikan Opacity dan Scale

Nilai dikongsi opacity dan scale berfungsi dengan cara yang sama — cipta nilai dikongsi, bina gaya beranimasi dengan useAnimatedStyle, kemudian tetapkan fungsi animasi kepada nilai tersebut untuk mencetuskan peralihan. Beberapa nilai dikongsi boleh digabungkan dalam satu useAnimatedStyle.

Kelebihan utamanya berbanding API Animated ialah fungsi kerja dalam useAnimatedStyle berjalan seiring dengan acara gerak isyarat pada utas UI, lalu membolehkan penjejakan masa nyata yang benar-benar lancar.

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

Peraturan Fungsi Kerja useAnimatedStyle

Fungsi yang diberikan kepada useAnimatedStyle ialah fungsi kerja — ia berjalan pada utas UI, bukan utas JavaScript. Ini bermakna fungsi tersebut tidak boleh mengakses penutupan JavaScript, modul yang diimport atau keadaan React secara terus. Fungsi tersebut hanya boleh mengakses nilai dikongsi dan pemalar primitif yang ditangkap ketika definisi.

Pemalam Babel Reanimated mengubah fungsi kerja supaya selamat untuk utas UI. Jika anda melanggar peraturan ini, anda akan melihat ralat masa jalan yang sukar difahami. Jika ragu-ragu, uji transformasi mudah terlebih dahulu sebelum menambahkan kerumitan.

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

Menjalankan Reanimated dengan Expo Go

Reanimated memerlukan modul asli dikompil dalam binari aplikasi. Dalam aliran kerja terurus Expo, ini bermakna anda memerlukan binaan pembangunan (dicipta dengan npx expo run:android atau npx expo run:ios), bukannya aplikasi Expo Go standard yang tidak menyertakan modul asli Reanimated.

Alternatif yang mudah ialah menggunakan klien pembangunan Expo (expo-dev-client), iaitu Expo Go yang boleh disesuaikan dan menyertakan modul asli anda sendiri. Pasang klien tersebut, bina semula aplikasi dan imbas kod QR untuk mendapatkan persekitaran pembangunan yang menyokong 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
};

Merangkaikan Animasi dengan withSequence

Reanimated menyediakan withSequence dan withRepeat untuk menggubah animasi secara terus dalam penetapan nilai, tanpa objek Animated.sequence atau Animated.loop yang berasingan. Sintaksnya lebih ringkas dan berfungsi.

withRepeat menerima satu animasi, bilangan ulangan (−1 untuk ulangan tanpa had) dan boolean untuk membalikkan arah. withSequence merangkaikan beberapa fasa animasi mengikut turutan.

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

Membaca Nilai Dikongsi berbanding Keadaan React

Satu model mental yang penting: nilai dikongsi bukanlah keadaan React. Menulis pada offset.value tidak menyebabkan pemaparan semula. Antara muka dikemas kini secara langsung melalui gaya beranimasi. Jika anda perlu menyegerakkan nilai dikongsi dengan keadaan React (contohnya, untuk memaparkan JSX bersyarat), gunakan useAnimatedReaction atau runOnJS untuk memanggil penetap keadaan React daripada bebenang UI.

Memahami sempadan ini — Reanimated beroperasi di luar kitaran pemaparan React — ialah kunci untuk menggunakannya dengan berkesan tanpa menimbulkan pepijat.

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

Ringkasan Reanimated berbanding API Animated

Bila hendak menggunakan setiap sistem animasi:

API Animated — Animasi kemunculan/penghilangan yang ringkas, pudar kelegapan dan jujukan yang telah diprakonfigurasi. Lebih mudah dipelajari, disertakan bersama React Native dan mencukupi untuk kebanyakan aplikasi.
Reanimated — Animasi yang bertindak balas terhadap gerak isyarat, penjejakan masa nyata dan fizik interaktif yang kompleks. Diperlukan apabila animasi mesti bertindak balas terhadap kedudukan gerak isyarat secara langsung bingkai demi bingkai.

Banyak aplikasi produksi menggunakan API Animated untuk peralihan UI yang ringkas dan Reanimated hanya untuk komponen yang dipacu gerak isyarat seperti kad yang boleh dileret, helaian bawah dan fungsi seret dan lepas.

Semakan Pantas

Uji pemahaman anda tentang konsep Pembangunan Aplikasi Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Imbas Kembali Pelajaran

Dalam pelajaran ini, anda telah mempelajari bahawa: useSharedValue mencipta nilai yang dikongsi antara bebenang JS dan UI untuk animasi tanpa overhed jambatan, useAnimatedStyle menghubungkan nilai dikongsi dengan gaya komponen melalui worklet pada bebenang UI, dan withTiming serta withSpring ditetapkan kepada sharedValue.value untuk memulakan animasi. Seterusnya, kita akan meneroka fungsi kerja dan cara fungsi tersebut membolehkan logik gerak isyarat kompleks dijalankan sepenuhnya pada bebenang UI.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Memasang Reanimated dan Nilai Dikongsi” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Memasang Reanimated dan Nilai Dikongsi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Memasang Reanimated dan Nilai Dikongsi”?

Pasang react-native-reanimated, tambahkan pemalam Babel, cipta nilai dikongsi dengan useSharedValue, dan sambungkannya kepada gaya beranimasi menggunakan useAnimatedStyle. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Memasang Reanimated dan Nilai Dikongsi” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Memasang Reanimated dan Nilai Dikongsi
Worklet dan Menjalankan Kod pada Utas UI
Gerak Isyarat Seret dan Leret dengan Gesture Handler
Zum Cubit dan Putaran

← Kembali ke React Native Academy