انعطاف و چالش های ساخت رابط کاربری با React Native

3 سال پیش توسط سید محمد حسین موسوی مطرح شد
آفلاین
user-avatar
سید محمد حسین موسوی ( 19033 تجربه )
3 سال پیش
تخصص : FullStack Developer

لینک کوتاه اشتراک گذاری

2

سلام
روند کار تو طراح قالب وب سایت معمولا به این صورته که گرافیست یه طرحی رو طراحی می کنه و کسی که frontend کاره، بر اساس اون طرح قالب رو پیاده سازی می کنه و تقریبا می شه گفت طرحی نیست که گرافیست بزنه و frontend کار نتونه پیاده سازیش بکنه. اون هم به خاطر انعطاف بسیار بالاییه که html و css و jquery تو طراحی قالب به ما می دن.
بهمین خاطر وقتی ما به عنوان برنامه نویس می خوایم یه پروژه رو استارت بزنیم، اصلا نگران محدودیت های طراحی و ... نیستیم.
می خواستم از دوستانی که تجربه کار با React Native رو دارن و باهاش پروژه زدن این سوال رو بپرسم که ما چقدر تو طراحی خروجی در اپلیکیشنی که تو اندروید یا IOS دستمون بازه؟
اولین سوال در بحث انعطاف تو طراحیه که آیا هر طرحی که گرافیست به ما تحویل می ده به راحتی کار با html و css می تونیم قالب رو تو React Native هم طراحی کنیم؟
سوال دوم هم اینه که تا چه اندازه دوتا پلتفرم ما شبیه به هم می شه؟ یعنی اگر من یه قالب رو طراحی کنم، خروجی دقیقا تو اندروید و IOS یکسانه یا خیر؟
سوال سوم هم اینه که دقیقا با یه کد می شه خروجی اندروید و IOS گرفت و فقط مراحل publish اش فرق می کنه یا باید یه بخش هایی از پروژه رو برای هر کدوم جدا جدا بنویسیم و مثلا یه درصدی از کدها مشترک هستند؟

البته می شه با خوندن مقاله به جواب این سوالات رسید اما بیشتر از هر چیزی راهنمایی دوستانی که تجربه کار و پروژه تو React Native داشتن می تونه کارگشا باشه.

بهترین پاسخ
آفلاین
user-avatar
Sajad Beheshti
3 سال پیش

سلام
من حدود ۳ پروژه جدی ریکت نیتیو رو انجام دادم و حرفه اصلیم قبل از برنامه نویسی، طراحی گرافیک و رابط کاربری بود.
به همین خاطر کار طراحی UI اپلیکیشن و وبسایت ها رو هم خودم انجام میدم.

در پاسخ به سؤال اول که چقدر امکان پیاده سازی وجود داره، اگر بخوایم درصد بدیم، شخصا نظرم بالای ۹۵ درصده.
تنها مواردی که مجبور شدم در طرح تغییر ایجاد کنم به خاطر React Native، مواردی بوده که امکان ریسپانسیو کردنشون برای سایز صفحه های مختلف مشکل بوده که این موضوع هم شاید با تعداد خط کد بیشتر و استایل دهی با توجه به سایز صفحه نمایش حل میشده.
درصد بالای شباهت کامپوننت ها و نحوه استایل دهی، بین React Native که JSX هستش و HTML و CSS بر کسی پوشیده نیست و کم تر موردی رو پیدا خواهید کرد که امکان پیاده سازی نداشته باشه.

در مورد سؤال دوم، همونطور که در پاسخ اول گفتم، طبیعیه زمانی که دامنه Dimension و نسبت صفحه هایی که باید توسط اپ پشتیبانی بشه، وسیع میشه، باید اپ رو با شرط ها مختلف، نسبت به Platform و Dimension واکنشگرا کنیم. این یک ایراد نیست و چاره ای هم نیست. اگر سمت کد نیتیو هم بشیم، مجبوریم از یه سری شرط ها و Layout ها برای ریسپانسیو شدن، استفاده کنیم. در هر صورت چند مورد مهم که نیاز به گذاشتن شرط هست رو میگم :
۱. اندازه فونت ها : که این مورد رو هم میشه با نسبت و درصد دادن، به جای px و دیگر واحد ها، حلش کرد.
۲. Shadow : که اگر داک ریکت نیتیو رو بخونین، متوجه میشین توی iOS دستمون بازه و میتونیم سایه دلخواه ایجاد کنیم ولی داخل اندروید از مقدار های پیش فرض و دستور متفاوتی استفاده میکنیم.
۳. Date picker : که به طور کلی برای iOS و android متفاوته، چون سیستم های متفاوتی استفاده میکنن.
۴. دکمه بازگشت : که فقط در گوشی های اندروید وجود داره و باید با BackHandler که توی داک ریکت هست مدیریتش کنیم.
۵. نوتیفیکیشن : که برای iOS دستور PushNotificationIOS توسط ریکت ارائه شده ولی برای اندروید باید از پکیج ها آماده و کد های نیتیو با قابلیت های کم تر ولی کافی، استفاده کنیم.
۶. و همه دستور هایی که با Android و IOS تموم میشن و داخل داک ریکت گفته شده که میتونین مطالعه کنین.

و برای سؤال سوم : به غیر از یه سری تنظیمات که باید داخل Xcode و Android studio انجام بدین، که خیلی هم محدود هستن، مثل مراحل Sign کردن و تنظیمات نوتیفیکیشن و ... ، نیازی نیست در فایل های اصلی برنامه تغییر ایجاد کنین.

در کل، با توجه به نظم و قدرتی که XCode داره، زیبایی، نرمی، تجربه کاربری و خروجی گرفتن روی iOS به مراتب کم درد سر تر و راحت تر از Android هست. تنها موردی که در طول پروژه ها زمان زیادی از ما گرفت، برخی مشکلات Android studio که بعضا به تحریم ها و Gradle مربوط میشد، بود.

تمام مواردی که در بالا گفتم نظر شخصیم بود و شاید مهارت کم من باعث شده برخی موارد رو به عنوان مشکل مطرح کنم. که خوشحال میشم راهکار هاش رو بشنوم.

آفلاین
user-avatar
Sajad Beheshti ( 665 تجربه )
3 سال پیش

لینک کوتاه اشتراک گذاری

8

سلام
من حدود ۳ پروژه جدی ریکت نیتیو رو انجام دادم و حرفه اصلیم قبل از برنامه نویسی، طراحی گرافیک و رابط کاربری بود.
به همین خاطر کار طراحی UI اپلیکیشن و وبسایت ها رو هم خودم انجام میدم.

در پاسخ به سؤال اول که چقدر امکان پیاده سازی وجود داره، اگر بخوایم درصد بدیم، شخصا نظرم بالای ۹۵ درصده.
تنها مواردی که مجبور شدم در طرح تغییر ایجاد کنم به خاطر React Native، مواردی بوده که امکان ریسپانسیو کردنشون برای سایز صفحه های مختلف مشکل بوده که این موضوع هم شاید با تعداد خط کد بیشتر و استایل دهی با توجه به سایز صفحه نمایش حل میشده.
درصد بالای شباهت کامپوننت ها و نحوه استایل دهی، بین React Native که JSX هستش و HTML و CSS بر کسی پوشیده نیست و کم تر موردی رو پیدا خواهید کرد که امکان پیاده سازی نداشته باشه.

در مورد سؤال دوم، همونطور که در پاسخ اول گفتم، طبیعیه زمانی که دامنه Dimension و نسبت صفحه هایی که باید توسط اپ پشتیبانی بشه، وسیع میشه، باید اپ رو با شرط ها مختلف، نسبت به Platform و Dimension واکنشگرا کنیم. این یک ایراد نیست و چاره ای هم نیست. اگر سمت کد نیتیو هم بشیم، مجبوریم از یه سری شرط ها و Layout ها برای ریسپانسیو شدن، استفاده کنیم. در هر صورت چند مورد مهم که نیاز به گذاشتن شرط هست رو میگم :
۱. اندازه فونت ها : که این مورد رو هم میشه با نسبت و درصد دادن، به جای px و دیگر واحد ها، حلش کرد.
۲. Shadow : که اگر داک ریکت نیتیو رو بخونین، متوجه میشین توی iOS دستمون بازه و میتونیم سایه دلخواه ایجاد کنیم ولی داخل اندروید از مقدار های پیش فرض و دستور متفاوتی استفاده میکنیم.
۳. Date picker : که به طور کلی برای iOS و android متفاوته، چون سیستم های متفاوتی استفاده میکنن.
۴. دکمه بازگشت : که فقط در گوشی های اندروید وجود داره و باید با BackHandler که توی داک ریکت هست مدیریتش کنیم.
۵. نوتیفیکیشن : که برای iOS دستور PushNotificationIOS توسط ریکت ارائه شده ولی برای اندروید باید از پکیج ها آماده و کد های نیتیو با قابلیت های کم تر ولی کافی، استفاده کنیم.
۶. و همه دستور هایی که با Android و IOS تموم میشن و داخل داک ریکت گفته شده که میتونین مطالعه کنین.

و برای سؤال سوم : به غیر از یه سری تنظیمات که باید داخل Xcode و Android studio انجام بدین، که خیلی هم محدود هستن، مثل مراحل Sign کردن و تنظیمات نوتیفیکیشن و ... ، نیازی نیست در فایل های اصلی برنامه تغییر ایجاد کنین.

در کل، با توجه به نظم و قدرتی که XCode داره، زیبایی، نرمی، تجربه کاربری و خروجی گرفتن روی iOS به مراتب کم درد سر تر و راحت تر از Android هست. تنها موردی که در طول پروژه ها زمان زیادی از ما گرفت، برخی مشکلات Android studio که بعضا به تحریم ها و Gradle مربوط میشد، بود.

تمام مواردی که در بالا گفتم نظر شخصیم بود و شاید مهارت کم من باعث شده برخی موارد رو به عنوان مشکل مطرح کنم. که خوشحال میشم راهکار هاش رو بشنوم.

برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.