https://virgool.io/feed/@persian1developers fa 2026-06-08 06:42:36 https://static.virgool.io/images/default-avatar.jpg https://virgool.io/@persian1developers https://virgool.io/@persian1developers/canvas-proximity-mask-interaction-wyu4i7ee7tzq https://www.aparat.com/v/V3fkO پیاده سازی این challenge خیلی برام گرون تموم شد. مجبور شدم هر چی تو ریکت نیتیو بود رو زیر و رو کنم. مشکل اصلی این بود که وقتی تعداد آیتم هایی که تو صفحه هستند خیلی زیاد می شه و انیمیشن هم قراره روشون اتفاق بیفته دیگه به فریم ریت ۶۰نمی رسیدم.اول از react-native-svg شروع کردم. SVG برخلاف انعطاف پذیری بالا تو پیاده سازی performance خیلی پایینی تو تعداد آیتم های زیاد داره.بعدش رفتم سراغ react-native-masked-view که خوشبختانه خیلی بهتر از SVG جواب می داد ولی تعداد آیتم ها که از یه تعدادی می گذشت به صورت کامل می ترکید.با توجه به اینکه این کار ذاتا باید روی Canvas پیاده بشه شرکت alibabab (البته خارجیش) یه کامپوننت توسعه داده واسه کار با Canvas تو ریکت نیتیو به اسم react-native-gcanvas که خوشبختانه از دو تا راه حل قبلی خیلی بهتر بود ولی با این تعداد آیتم به فریم ریت ۳۰ بیشتر نمی رسید. البته کلی بدبختی هم تو راه اندازیش داشت.همینجوری که ناامید بودم رسیدم به expo-three که engine بازی سازی threejs رو می تونید تو ریکت نیتیو اجرا کنید. به جز پیچیدگی های عجیبی که محیط های سه بعدی دارن این engine حداقل تو محیط موبایل خیلی ضعیفتر از مورد قبل بود. البته نسخه وب این engine عالیه ولی رو موبایل چون particle ها رو پشتیبانی نمی کرد با geometry ها به اون فریم ریت نمی رسید.و راه حل یکی به آخر استفاده از gl-react بود که می تونید shader های opengl رو تو ریکت نیتیو اجرا کنید. از نظر فریم ریت و تعداد زیاد آیتم خیلی عالی بود ولی نوشتن shader طرح اصلی نیاز به ۱۰ سال تجربه داشت!!!! واقعا خیلی پیچیده بود!!!!و راه حل آخر همینجور که می گشتم دنبال راه حل با به graphic engine 2d به اسم skia آشنا شدم که به نظر خیلی ردیف بود و فهمیدم که گوگل از این انجین واسه اندروید و کروم و ... داره استفاده می کنه. و نکته جالب اینکه کنترل CustomPaint تو Flutter داره از همین انجین استفادهمی کنه (البته کلا فلاتر واسه بحث paint تو همه ی قسمت ها از این استفاده می کنه).به عنوان کسی که تعصب داره به react-native خیلی سخت بود که بخوام این تست رو رو فلاتر انجام بدم و سخت تر اینکه نتیجه هم اگه می داد که دیگه هیچی. هر طوری بود بعد از کلی آموزش تو یوتوب اولین تست رو تو فلاتر گرفتم.واقعا CustomPaint تو Flutter عالیه و تونستم بعد از کلی بدبختی طرح رو با فریم ریت ۶۰ دربیارم.منابعایده طرح اصلی: https://dribbble.com/shots/5583825-Canvas-Proximity-Mask-Interactionسورس کد: https://github.com/nazarireza/ProximityMaskFlutter رضا نظری رضا نظری Thu, 16 Apr 2020 14:36:33 +0430 https://virgool.io/farasib/change-theme-to-dark-like-apple-in-react-native-blsrxriblaik خیلی وقت بود داشتم فکر می کردم بهترین راه حل واسه تغییر تم یه برنامه تو ریکت نیتیو چیه و مثلا سیستم عامل هایی مثل مک یا ویندوز زیرساخت کامپوننت هاشونو چطور طراحی کردن که تغییر تم تو کل سیستم به صورت آنی تاثیر می زاره و حالت خفن دیگه اینکه سیستم عاملهای اپل تغییر تم رو با انیمیشن پیاده سازی کردن که حس خیلی خوبی به کاربر می ده.تغییر تم سیستم عامل مکتصمیم گرفتم هر جور شده این حالت رو تو ریکت نیتیو پیاده کنم و با کسایی که به اینجور کارا علاقه مندن به اشتراک بزارم.پیش نیازهاکتابخونه react-native-reanimateکه واسه انیمیت کردن ازش استفاده می کنم و در این حد بهتون بگم که فرقش با Animated خود ریکت نیتیو اینه که این کتابخونه همه ی انیمیشن ها رو موقع تعریف به UI Thread می فرسته که دیگه موقع اجرا نیازی به ارتباط با JS Thread نیست و Frame Rate رو به طور محسوسی افزایش می ده. (Declarative Animation API)کتابخونه react-native-redashکه یه سری Utility هست که من واسه Interpolate رنگ ازش استفاده می کنم.مراحل انجامخب اولین کاری که باید انجام بدیم اینه که یه Context واسه تم تعریف کنیم که بتونیم تو صفحات و کامپوننت های مختلف به تم انتخاب شده دسترسی داشته باشیم و موقعی که تم تغییر کرد همه ی صفحات و کامپوننت هایی که تم رو پیاده کردن متوجه بشن و دوباره رندر بشن.همچنین متد تغییر تم رو هم تو Context داریم که هر جا خواستیم بتونیم تم رو عوض کنیم.ThemeContext.jsخب حالا باید کل کامپوننت App رو بزاریم تو Context مون که بتونیم از امکاناتی که بالا گفتم استفاده کنیم.App.jsتو این مرحله می خوایم یه Custome Hook بنویسیم که بتونیم بعدا تو کامپوننت هامون ازش استفاده کنیم.این Custom Hook چند تا چیز بهمون میدهتم جاری themeمتدی برای تغییر تم changeThemeرنگ مورد نیاز به عنوان backgroundColorرنگ مورد نیاز به عنوان ForegroundColorUseTheme.jsاگه با کتابخونه های react-native-reanimted و react-native-redash کار نکرده باشید احتمالا کد بالا یه کم گیج کننده باشه.حالا می خوایم دو تا کامپوننت بنویسیم یکی به اسم Stack که یه Wrapper روی View هست و یکی دیگه به اسم Button که از اسمش مشخصه چیکار می کنه که بتونیم تو همه برنامه ازشون استفاده کنیم.مثلا ما از Stack به عنوان Container همه ی صفحاتمون استفاده می کنیم و می تونیم لاجیک مربوط به Container تمام صفحات رو روی یه کامپوننت مجتمع کنیم.Stack.jsButton.jsحالا یه صفحه درست می کنیم با یه Stack به عنوان Container و یه دکمه برای تغییر تمPage1.jsو در نهایت صفحه App رو تغییر می دیم.App.jsو در پایان خروجی کارخب دوستان عزیز می تونید سورس کد رو از اینجا دانلود کنید. ضمنا خوشحال می شم اگه نظر پیشنهاد یا انتقادی داشتید بگید. رضا نظری رضا نظری Fri, 07 Feb 2020 22:02:49 +0330