animation-with-react-compiler

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Animation with React Compiler

结合React Compiler的动画开发

Overview

概述

Guidelines for using React Native Reanimated shared values with React Compiler. When using React Compiler, you must use the

get()

and

set()

methods instead of directly accessing the

value

property to ensure compatibility with React Compiler standards.

本文提供在React Compiler中使用React Native Reanimated共享值的指南。当使用React Compiler时，你必须使用

get()

和

set()

方法，而非直接访问

value

属性，以确保符合React Compiler的标准。

When to Apply

适用场景

Reference these guidelines when:

Working with React Compiler enabled projects
Using
```
useSharedValue
```
in components
Accessing or modifying shared value values
Ensuring React Compiler compatibility with Reanimated

在以下场景中参考本指南：

处理启用React Compiler的项目
在组件中使用
```
useSharedValue
```
访问或修改共享值
确保Reanimated与React Compiler的兼容性

Key Guideline

核心指南

Use get() and set() Methods Instead of .value

使用get()和set()方法替代.value属性

When working with the React Compiler, you should refrain from accessing and modifying the

value

property directly. Instead, use the

get()

and

set()

methods. They're the alternative API for

useSharedValue

, compliant with the React Compiler standards.

Don't do this – accessing

.value

directly:

tsx

function App() {
  const sv = useSharedValue(100);

  const animatedStyle = useAnimatedStyle(() => {
    "worklet";
    return { width: sv.value * 100 }; // ❌ Direct property access
  });

  const handlePress = () => {
    sv.value = sv.value + 1; // ❌ Direct property modification
  };
}

Instead, use

get()

and

set()

methods:

tsx

function App() {
  const sv = useSharedValue(100);

  const animatedStyle = useAnimatedStyle(() => {
    "worklet";
    return { width: sv.get() * 100 }; // ✅ Using get() method
  });

  const handlePress = () => {
    sv.set((value) => value + 1); // ✅ Using set() method
  };
}

当使用React Compiler时，应避免直接访问和修改

value

属性，而是使用

get()

和

set()

方法。它们是

useSharedValue

的替代API，符合React Compiler的标准。

错误示例——直接访问.value：

tsx

function App() {
  const sv = useSharedValue(100);

  const animatedStyle = useAnimatedStyle(() => {
    "worklet";
    return { width: sv.value * 100 }; // ❌ 直接访问属性
  });

  const handlePress = () => {
    sv.value = sv.value + 1; // ❌ 直接修改属性
  };
}

正确示例，使用get()和set()方法：

tsx

function App() {
  const sv = useSharedValue(100);

  const animatedStyle = useAnimatedStyle(() => {
    "worklet";
    return { width: sv.get() * 100 }; // ✅ 使用get()方法
  });

  const handlePress = () => {
    sv.set((value) => value + 1); // ✅ 使用set()方法
  };
}

Usage Patterns

使用模式

Reading Shared Values

读取共享值

tsx

// ✅ In worklets (useAnimatedStyle, useDerivedValue, etc.)
const animatedStyle = useAnimatedStyle(() => {
  return { opacity: sv.get() };
});

// ✅ In useEffect or callbacks
useEffect(() => {
  console.log(sv.get());
}, []);

tsx

// ✅ 在worklet中（useAnimatedStyle、useDerivedValue等）
const animatedStyle = useAnimatedStyle(() => {
  return { opacity: sv.get() };
});

// ✅ 在useEffect或回调函数中
useEffect(() => {
  console.log(sv.get());
}, []);

Modifying Shared Values

修改共享值

tsx

// ✅ Direct value assignment
sv.set(100);

// ✅ Using updater function
sv.set((currentValue) => currentValue + 1);

// ✅ With animation functions
sv.set(withSpring(1.2));
sv.set(withTiming(0.8, { duration: 300 }));

tsx

// ✅ 直接赋值
sv.set(100);

// ✅ 使用更新函数
sv.set((currentValue) => currentValue + 1);

// ✅ 结合动画函数
sv.set(withSpring(1.2));
sv.set(withTiming(0.8, { duration: 300 }));

Benefits

优势

React Compiler Compatible: Works seamlessly with React Compiler
Consistent API: Provides a consistent method-based API
Type Safety: Better TypeScript support and type inference
Future Proof: Aligns with React Compiler standards and best practices

兼容React Compiler：与React Compiler无缝协作
API一致性：提供统一的基于方法的API
类型安全：更好的TypeScript支持和类型推断
面向未来：符合React Compiler的标准和最佳实践