آموزش react native همراه با مثال از صفر تا صد - ۳

در این مجموعه آموزشی قصد دارم که یک مثال ساده Todo List رو از ابتدا شروع کنم و در هر قسمت ۳ قدم برای تکمیلش انجام بدم و به زبان خیلی ساده برای همه منتشر کنم. این پروژه با ReactNative و یا به اختصار RN انجام میشه و در ادامه پکیج های navigation & native-base & Redux به برنامه اضافه می شوند. البته این همه ماجرا نیست و کلی ترفند و پکیج دیگه هم داریم که در طی آموزش بهشون اشاره و کاربردشون رو بررسی میکنم.

قسمت های قبلی از این سری آموزشی:

https://virgool.io/iran-react-community/آموزش-مبتدی-react-native-همراه-با-مثال-از-صفر-تا-۱%DB%B0%DB%B0-قسمت-اول-cyqz5skqhuxv

https://virgool.io/iran-react-community/آموزش-react-native-همراه-با-مثال-از-صفر-تا-صد-۲-oezzf5beawby

قدم اول: تکمیل کامپوننت Header

با توجه به چیزی که تو ذهن من از طرح نهایی هست ( میتونید تو قسمت اول ، عکس نهایی پروژه رو ببینید) میخوام کامپوننت هدر رو کامل کنم. همونطور که تو قسمت قبل هم دیدید این کامپوننت خیلی ساده هست و صرفا یک متن رو قراره رند کنه .

بعدا که اپ ما کامل شد تمام کدهامون رو refactor میکنیم و کامپوننت هایی مثل کامپوننت Header که state ندارند رو به Functional Component تغییر میدیم.

پس خیلی ساده قراره که اسم اپ رو تو این قسمت قرار بدیم . فراموش نکنید که باید استایل رو به فایلتون imoprt کنید .

برای استایل دهی به این قسمت هم یک قسمت title به فایل appStyle.js اضافه میکنیم و این مقادیر رو براش در نظر میگیریم:

title: {
  color: '#fff',
  fontSize: 28,
  fontWeight: '500',
  marginTop: 30,
  marginBottom: 10
}

پس فایل appStyle.js به این شکل در میاد:

من چون از شبیه ساز آیفون ایکس استفاده میکنم و این مدل از گوشی طراحی خاصی داره ،برای اینکه نوشته من درست قرار بگیره، از marginTop:30 استفاده میکنم. شما میتونید با سلیقه خودتون و باتوجه به شبیه ساز خودتون، این مقدار رو تغییر بدین.

خوب وقت این رسیده که تغییرات جدیدی که اعمال کردیم رو تو اپ خودمون ببینیم. اگه شبیه ساز شما در حال اجراست که میتونید با reload کردن برنامه تغییرات جدید رو ببینید و در غیر این صورت با اجرای دستور:

react-native run-ios
react-native run-android

قدم دوم: اضافه کردن بخش اصلی

توی فایل body.js میخواهیم یه قسمتی درست کنیم که بتونیم todo جدید به برنامه اضافه کنیم و هم قسمت پایینش todo هایی که قبلا اضافه کردیم رو ببینیم. پس اول یک View درست میکنیم و اسمش رو card (برای استایل) میذاریم و توی اون از کامپوننت TextInput استفاده میکنیم. این کامپوننت رو از react-native به برناممون وارد میکنیم.

برای این که بتونیم به هر قسمتی جدا جدا استایل بدیم یک فایل جدید به اسم bodyStyle.js توی پوشه components میسازیم و به برناممون import میکنیم. برای قسمت هدر هم میتونسیم این کارو انجام بدیم .( در ادامه این کارو میکنیم و همه قسمت هارو از هم جدا میکنیم)

به کامپوننت TextInput استایل میدیم (با اسم input) و از پراپس palceholder استفاده میکنیم. placeholder در واقع متنی هست که تو قسمت ُTextInput قرار میگیره و به محض اینکه کاربر این قسمت رو تاچ کنه و شروع به تایپ کنه از بین میره . ( حتما این مدل فرم ها رو جاهای مختلف دیدید)

فایل جدید استایل هم به این شکل تغییر میدیم:

نکته : من از آبجکت Dimension استفاده کردم ( از خود react-native وارد کردم) چون عرض دستگاه های مختلف باهم فرق میکنه پس لازمه که عرض این قسمت هم متناسب با خود دستگاه تنظیم بشه و حالت داینامیک داشته باشه . هرچند که میشد از مقدار % هم استفاده کرد اما برای اینکه با آبجکت جدید Dimenstion آشنا بشید من از این روش استفاده کردم.

پس با استفاده از کد خط دوم میشه اندازه صفحه دستگاه رو به دست آورد . توی قسمت card هم ازش ۳۰ پیکسل کم کردم تا کل صفحه رو اشغال نکنه .

سوال : به نظر شما چرا برای ارتفاع card از همین روش استفاده نکردم ؟‌
اصلا برای height هیچ مقداری به استایل ندادم. فکر میکنید دلیلش چی هست ؟‌

این سوال رو تو قسمت بعدی جواب میدم!

بعد از اجرای برنامه:

ویژگی border که به قسمت input اضافه کردیم برای اینه که قسمت ورودی رو از قسمت پایین card جدا کنه (با استفاده از یک خط) و بعدا بتونیم تو این قسمت todo هایی که قبلا اضافه کردیم رو ببینیم.

قدم سوم: اضافه کردن سایه

برای اینکه قسمت card که نوشتیم رو سایه بدیم میتونیم از خصوصیت shadow توی استایل استفاده کنیم. اما اضافه کردن shadow توی پلتفرم های مختلف باهم فرق میکنه . پس باید برای اندروید و iOs از دو روش مختلف استفاده کنیم. برای این منظور از آبجکت Platform استفاده میکنیم . وظیفه Platfrom تشخیص پلتفرم دستگاه مورد نظر هست و میتونیم با استفاده از این ویژگی برای Android & iOs کدهای مختلفی بنویسیم. shadow توی Android با استفاده از elevation و توی iOs هم با روشهای معمولی shadow که توی CSS وجود داره انجام میشه.

با توجه به توضیحات بالا ، فایل bodyStyle.js رو ویرایش میکنیم و Platform رو از react-native به برنامه وارد میکنیم و توی استایل card ازش استفاده میکنیم.