React NativePerformance

ژست‌هایی در React Native که واقعاً بومی حس می‌شوند

Reanimated و Gesture Handler روی ترِد UI تفاوتِ یک نمونهٔ اولیه و یک محصول است.

KB Kambiz Baghieدی ۱۴۰۴۱۰ دقیقه

موضوع JS دوست شما نیست

یک انیمیشن را از جاوا اسکریپت هدایت کنید و هر فریم رها شده در منطق کسب و کار شما به صورت لکنت در انگشت شست کاربر نشان داده می شود. راه حل این است که ردیابی حرکت و انیمیشن را به طور کامل در رشته رابط کاربری با Worklet های Reanimated اجرا کنید.

یک برگه قابل کشیدن، با فریم کامل

  • Gesture.Pan() مستقیماً روی یک مقدار مشترک می نویسد - بدون پل رفت و برگشت.
  • فیزیک بهار با withSpring برای ته نشینی، بنابراین مانند یک شی واقعی کند می شود.
  • نقاط اسنپ را روی رشته رابط کاربری محاسبه کنید تا انتشار همیشه به طور تمیز وارد شود.
const y = useSharedValue(0);
const pan = Gesture.Pan()
  .onChange((e) => { y.value += e.changeY; })
  .onEnd((e) => { y.value = withSpring(snap(y.value, e.velocityY)); });

اندروید میان رده آزمون واقعی است

گل سرسبد بسیاری از گناهان را پنهان می کند. نمایه کردن برگه در اندروید میان رده - جایی که رشته JS واقعاً مشغول است - چیزی است که ثابت می کند ژست واقعاً خارج از رشته است. اگر آنجا صاف بماند، همه جا صاف است.

پیش‌نویس کاری. طرحی از مقالهٔ کامل — نسخهٔ کامل در راه است. نکته‌های زیر برداشت‌های واقعی از پیاده‌سازیِ همین کار در محیطِ تولید است.
ژست‌هایی در React Native که واقعاً بومی حس می‌شوند — Kambiz Baghie