الخبير
واجهة المستخدم

الحركات والانتقالات

إضافة حركات سلسة لتطبيقك باستخدام Reanimated

الحركات والانتقالات

React Native Reanimated يوفر حركات سلسة تعمل على الـ UI thread مباشرة.

التثبيت

npx expo install react-native-reanimated

حركة أساسية

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

export default function AnimatedBox() {
  const scale = useSharedValue(1);

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

  const handlePress = () => {
    scale.value = withSpring(scale.value === 1 ? 1.2 : 1);
  };

  return (
    <Pressable onPress={handlePress}>
      <Animated.View
        style={[animatedStyle, {
          width: 100,
          height: 100,
          backgroundColor: '#7c3aed',
          borderRadius: 16,
        }]}
      />
    </Pressable>
  );
}

الخطوة التالية

تعلم كيفية بناء التطبيق باستخدام EAS Build.

On this page