واجهة المستخدم
الحركات والانتقالات
إضافة حركات سلسة لتطبيقك باستخدام 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.