آموزش Html5

آموزش طراحی سایت

آموزش DocType

اعلام نوع داکیومنت در HTML5 هم ساده و هم جالب می باشد. این کار به سادگی زیر میباشد:

<!DOCTYPE html>

‎بر خلاف doctype در HTML1 و HTML4 که با آن آشنا هستیم:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ‎‎"HTTP>

/www.w3.org/TR/html4/loose.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ‎‎"HTTP>

/www.w3.org/TR/html4/frameset.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ‎‎"HTTP>

/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ‎‎"HTTP>

/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">‎

برخی از آنها حتی در یک خط نوشته نمی شوند. این اولین دلیلی است که نشان می دهد کار طراحان وب با HTML5 راحت تر شده. یک صفحه ی HTML5 می تواند به سادگی زیر باشد:

<!DOCTYPE html>‎

<html>‎

<head> ‎

<title>HTML5 is rocks!</title> ‎

</head>‎

<body>

‎ <h1>HTML5 Rocks!</h1> ‎

</body>‎

</html>‎

اجازه بدهید در شروع یک سرگرمی داشته باشیم. قرار است در مورد مرورگری صحبت کنیم که فایل صدا را در حالت طبیعی خود پشتیبانی می کند، درست همانطور که برچسب<img> از 1994 پشتیبانی می شود. HTML 5 قرار است به صدای پلاگین(plug-in) مانند مدیاپلیر، سیلورلایت، اپل کویک تایم، و Adobe Flash بد نام خاتمه دهد.

اگر در بالا کنترل اجرا کننده ی صدا نمی بینید، احتمالا مرورگر شما برچسب صدا را پشتیبانی نمی کند.

در بالا یک گالری از پخش کننده های صدا را، توسط مرورگرهای مهم می بینید. همانطور که می بینید اندازه کنترل پخش کننده ها با یکدیگر متفاوت هستند. پخش کننده ی IE9 در مقایسه با پخش کننده ی safari بسیار بزرگ می باشد. این مسئله برای طراح وب می تواند یک مشکل بزرگ باشد.

اگر برای ویندوز از safari استفاده می کنید، اما بدون Quick Time، برنامه ی Safari شما قرار نیست از برچسب مدیا (هم در حالت صوتی و هم در حالت تصویری) پشتیبانی کند. تصور می کنم که برنامه ی Safari برای اجرای فایل های مدیا، به کدک Quick Time اتکا دارد.

چگونه؟

برای اینکه صفحه ی وب شما موسیقی اجرا کند، کد html شما می تواند به سادگی زیر باشد:

متاسفانه محبوب ترین فرمت صدا MPEG3 (mp3) یک استاندارد باز نیست، بلکه یک اختلال عمومی است، و این بدین معنا که مرورگرها برای رمزگشایی آن باید مقداری پول پرداخت کنند و این ممکن است از لحاظ اقتصادی برای شرکت ها و سازمان های کوچکتر عملی نباشد. همانطور که در جدول زیر مشاهده می کنند تنها سران بزرگ ثروت کافی برای رمزگشایی MP3 را دارند. Opera و firefox تنها فرمت vorbis (ogg) را پشتیبانی می کنند که یک استاندارد باز می باشد.

از طرف دیگر Vorbis توسط Safari و IE9 پشتیبانی نمی شود، در حالیکه همیشه داشتن ogg و MP3 در کنار هم خوب است.

امتحان کنید که مرورگر شما تا چه حد صدا را پشتیبانی می کند.

آنچه که می توانید انجام دهید در زیر ارائه شده است:‎

‎ <source src="vincent.mp3" type="audio/mpeg" />

‎ <source src="vincent.ogg" type="audio/ogg" />

‎</audio>‎

آموزش طراحی سایت

ارائه کردن یا نکردن نوع MIME (type="audio/mpeg")برای مرورگر انتخابی می باشد. مدرنترین مرورگرها به اندازه ی کافی هوشمند هستند تا نوع محتوا را از طریق خود آن مشخص کنند. به هرحال کمک کننده بودن برای مرور گر همیشه خوب است، چرا که باعث می شود مرورگر شما سریعتر و بهتر کار کند.

ویژگی های <audio>

ویژگی Boolean ویژگی می باشد که یا در برچسب نمایش داده می شود یا نه. ویژگی Boolean فقط نام خود را دارد و دارای مقدار نیست. شما می توانید آن را از این طریق نیز به کار ببرید، هر مقداری که شما به ویژگی Boolean اختصاص دادید، فقط یک معنا دارد –TRUE.

این ترکیب کاملا غیرضروری است

و این آن چیزی است که شما لازم دارید.

HTML 5 در واقع تکاملی از وب می باشد، نه انقلابی که فقط گذشته را نابود می کند. به هرحال اجازه دهید کمی به جلوتر برویم.

برای پشتیبانی مرورگری که اصلا نمی داند <audio> چیست، از قبیل IE8 وپایین تر، با استفاده از برچسب <object> باید اجازه دهیم در همان روزهای قدیمی خود باقی بمانند.

‎ <source src="vincent.mp3" type="audio/mpeg" />

‎ <source src="vincent.ogg" type="audio/ogg" />

‎ <object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" width="225" ‎height="86">

‎ <param name="movie" value="media/OriginalMusicPlayer.swf" />

‎ <param name="FlashVars" value="mediaPath=vincent.mp3" />

‎ </object>

‎</audio>

آموزش طراحی سایت

‎

من در مثال بالا از یک اجرا کننده ی flash mp3 از PremiumBeat.com استفاده می کنم.

اگر مرورگر شما از HTML5 پشتیبانی نمی کند اما شما فلش پلاگین را دارید، احتمالا چیزی را از دست نداده اید.

اگر HTML5 نه مرورگر و نه فلش را پشتیبانی می کند، ممکن است به یوزر اجازه بدهید فایل صدا را دانلود کند و در گرفتن یک اجرا کننده برای اجرای آن، برای آن ها آرزوی خوش شانسی کنید.

<source src="vincent.mp3" type="audio/mpeg" />‎

‎ <param name="movie" value="media/OriginalMusicPlayer.swf" />

‎ <param name="FlashVars" value="mediaPath=vincent.mp3" />

</object>

<a href="vincent.mp3">Download this lovely song and wish you all the best!</a>

به جای استفاده از مرورگر اجرای صدای استاندارد، با استفاده از خلاقیت خود می توانید برنامه ی خود را بنویسید.

‎<div>

‎<button onclick="document.getElementById('player').play()">Play</button>

‎<button onclick="document.getElementById('player').pause()">Pause</button>

‎<button onclick="document.getElementById('player').volume += 0.1">Vol+ </button>

‎<button onclick="document.getElementById('player').volume -= 0.1">Vol- </button>

</div>‎

آموزش طراحی سایت

آموزش Video در HTML 5

جریان ویدئو در اینترنت چیز تازه ای نیست، تلاش برای انجام چنین کاری به نیمه ی قرن بیستم برمی گردد. به خاطر پایین بودن پهنای باند شبکه ها و قدرت پایین CPU، هیچ موفقیتی حاصل نشد، تا اینکه Youtube در سال 2005 آغاز به کار کرد.

اکنون با HTML5، می توانیم ویدئو را مانند یک عنصر داخلی، مانند ، قرار دهیم. طول، عرض و پوستر وجود دارند، طول و عرض سایز صفحه را مشخص می کنند و پوستر تنها یک فایل تصویر ثابت می باشد که قبل از اجرای فیلم روی صفحه قرار گرفته است.

چگونه؟

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

در واقع زندگی آنطوری نیست که ما فکر می کردیم باید باشد، خط ساده ی کد بالا تنها در google chrome و apple safari کار می کند و حتی برای اجرای فیلم درapple safari باید مطمئن شوید که quick time در کامپیوتر شما نصب شده است.

مشابه گرفتاری صوتی، یک فرمت جهانی برای ویدئو نداریم که همه ی مرورگرهای وب از آن پشتیبانی کنند، حداقل در زمان نگارش آن (13 دسامبر 2010).

در اینجا دوباره بازی پول مطرح می شود. H.264 یک مشکل همگانی است، فایرفاکس و اپرا خرید امتیاز آزاد یک کدک را پذیرفتند که Theora و WebM می باشد (کدکVP8).

گوگل در ژانویه ی 2011 اعلام کرد که در ورژن آینده ی گوگل کروم از H.264 پشتیبانی نمی کند. به طور خلاصه کد تک خطی ساده، همانطور که در بالا توضیح دادم، عملی نمی باشد. شما حداقل باید دو منبع برای یک ویدئو تامین کنید.

‎</video>‎

نکات

برای اینکه فایل ویدئوی خود را در H.264 رمزگشایی کنید، ممکن است تمایل داشته باشید HandBrake را امتحان کنید، که یک GPL مناسب ویک ابزار منبع باز می باشد. اگرمی خواهید تنها یک ویدئو را رمزگشایی کنید و تمایلی به نصب برنامه ای دیگر روی OS تقریبا بسته ی خود ندارید، می توانید فیلم خود را روی Youtube آپلود کنید. سپس Youtube برنامه ی شما را به فرمت H.264 آپلود کرده و شما می توانید آن را از Youtube دانلود کنید.

همانطور که برای فرمت های WEBM و Theora ممکن است Firefogg را (یک فایرفاکس پلاگین است که حداقل دانلود را لازم دارد.) امتحان کنید.

آموزش طراحی سایت

ویژگی های ویدئو

مرورگرهایی که در مورد HTML5 دارای معلومات کمتری هستند چطور؟

اگر فکر می کنید که اجرای ویدئو برای سه دفعه سخت است، به مدت کمی طولانی تر نفس خود را نگه دارید، زیرا قرار است برای تامین یوزرهای بیشتر که از مرورگرهای قدیمی تری مانند internet explorer 8 و یا پایین تراستفاده می کنند، بیشتر اذیت شوید.

مایکروسافت internet explorer 9 Beta را در نوامبر 2010 آزاد کرد که HTML5 را نیز پشتیبانی می کند. اما برچسب <video> به عنوان نگارش هنوز پشتیبانی می شود. به هرحال شما مجبورید برای قرار دادن یک فلش پلیر در <object> به جلوتر بروید زیرا بیشتر یوزرها فلش پلاگین را نصب کرده اند. من معتقدم که مایکروسافت در نهایت <video> را پشتیبانی می کند، چرا که همیشه برای اکثر یوزرها رسیدن به آخرین ورژن مرورگر زمان بر است.

‎ <param name="movie" value="media/flowplayer-3.2.5.swf" />

‎ <param name="allowfullscreen" value="false" />

‎ <param name="flashvars"

value='config={"clip": {"url": "html5iscool.mp4", "autoPlay":false, "autoBuffering":true}}' />

</object>

</video>‎

آموزش ایجاد ویدیو در صفحات وب با HTML5

در گذشته و شماره های قدیم HTML استفاده از ویدیو کار بسیار دشواری بود ولی در HTML5 افزودن یک ویدیو به لطف بروز رسانی از طرف مایکروسافت با سهولت بسیار قابل دسترس است .

به گونه ای که شما می توانید حتی تغییرات مورد دلخواه بر روی ویدیوی مورد نظر را اعمال نمایید .

آموزش طراحی سایت

آموزش نحوه اعمال ویدیو در صفحات وب

برای این کار می توانید از تگ ویدیو < Video > استفاده نمایید و آدرس ویدیوی مورد نظر را در تگ به صورت زیر کپی کنید :

</video>

توضیح کد:

در تگ ویدیو خصیصه Controls به شما امکان استفاده از ابزارهای کنترل ویدیو در مرورگر را می دهد ، به گونه ای که بتوانید همانند یک Player در مرورگر خود با ویدیو برخورد نمایید و از امکان هدایت زمانی یا seeking ویدیو را دشته باشید تا بتوانید زمان مورد نظر خود را بیابید و از دیگر امکانات این ویدیو پلیر افزایش و کاهش میزان صدا است و در آخر امکان نمایش به صورت تمام صفحه و یا اندازه ی اصلی ویدیو را دارا می باشید .

نکته :در صورت عدم تنظیم ابعاد ویدیو های بارگذاری شده در صفحه HTML5 هر ویدیو با ابعاد پیش فرض خود فایل در صفحه پخش خواهد شد .

برای جلوگیری از این بهم ریختگی در صفحه شما می توانید با تعیین ابعاد به صورت دلخواه ، به مرتب نمودن فایل های ویدیویی خود از نظر ابعاد اقدام نمایید .

شما کافیست از property های height و width را استفاده نمایید .

به کد زیر دقت نمایید :

</video>

نکته :باید همواره به یاد داشته باشید که فرمت های ویدیویی قابل پشتیبانی در HTML5 سه فرمت Mp4 ، Ogg و Webm می باشد ، در غیر این صورت باید با استفاده از یک Converter به یکی از فرمت یاد شده تغییر داده شود .

آموزش استفاده از پوستر برای پیش نمایش ویدیو در صفحات وب در HTML5:

برای استفاده از یک پوستر برای پیش نمایش در فایل ویدیویی کافیست شما از property به نام poster در تگ < video > همانند زیر استفاده نمایید :

</video>

در زمانی که ویدیوی شما هنوز اجرا نشده است عکس انتخابی شما به عنوان یک پوستر به نمایش گذاشته می شود .

آموزش طراحی سایت

۰ نظر

۰ ۱۲ مهر ۹۸ ، ۱۶:۰۴

افشین رفوا

آموزش Html 5

آموزشHtml 5

آموزش طراحی سایت

من معتقدم HTML5 دستاورد بزرگی خواهد بود (بسیاری از مردم هم چنین اعتقادی دارند.). این برنامه ممکن است روش لباس پوشیدن و غذا خوردن ما را تغییر ندهد، اما مطمئنا روش توسعه ی برنامه های وب و طراحی صفحات وب را در 10 سال آینده تغییر خواهد داد. به هرحال این صفحه آموزش HTML نمی باشد. HTML5 چیز کاملا جدیدی نمی باشد. بسیاری از ویژگی های HTML5 از HTML4 یا HTML1.0 گرفته شده اند. با زمان و انرژی محدودم می توانم فقط آنچه را در HTML5 جدید است و تمرینات قدیمی که دیگر مورد استفاده نیستند را پوشش دهم.

این یک سایت HTML5 می باشد. هنگامی که در حال کشف و یادگیری HTML5 هستم، امیدوارم بتوانم آنچه را که یاد گرفته ام با شما به اشتراک بگذارم.

آموزش طراحی سایت

" دو نوع انگیزه وجود دارد که با دونوع هدف منطبق می شود. انگیزه های سلطه گرایی هستند که هدف آنها رسیدن به متعلقات شخصی می باشد که نمی توان به اشتراک گذاشت و در مرکز انگیزه ی مادی قرار می گیرند. انگیزه های خلاقانه نیز وجود دارند که هدف آنها آوردن اموالی است که در آنها هیچ گونه تملک و یا شخصی بودنی وجود ندارد.

بهترین زنگی، آن زندگی میباشد که انگیزه های خلاقانه بیشترین نقش را داشته و انگیزه های مالی کمترین را.

برتراند راسل (1872 –1970)

با توجه به این نوشته HTML5 یک نسخه ی در حال کار می باشد. به عبارت دیگر HTML5 هنوز یک کار در حال پیشروی می باشد. ویژگی های آن در W3C منتشر شده و روز به روز تغییر می کند.

چرا HTML5 مهم است؟

احتمالا تاکنون در مورد HTML5 شنیده اید، فکر می کنم محبوب ترین برنامه ای که فیلم را بدون Adobe Flash اجرا می کند، باید از آقای استیو جابز برای تبدیل آن به یک فن آوری معروف تشکر کرد.

علاوه بر این ممکن است در مورد ایجاد انیمیشن بدون پلاگین، کنترل ورودی غنی مانند دیت پیکر، کالرپیکر، اسلایدر بدون جاوااسکریپت و در انتها ذخیره ی داده ی برون خطی (آفلاین) نیز شنیده باشید. به هرحال این هم فقط بخشی از HTML5 می باشد.

چه وقت؟

WC3 در فوریه ی 2011 اعلام کرد که جولای 2014 تاریخی است که HTML5 پیشنهاد رسمی برای استاندارد وب می شود.

آموزش طراحی سایت

زمان را فراموش کنید:

واقعیت این است که جدول زمانی پیشنهادی از طرف WHATWG واقعا اتفاق نیفتاد. توسعه ی وب در دستان دو گروه از مردم واقع شده است.

اولین گروه کمپانی های مرورگر معروفی مانند Mozilla، مایکروسافت، اپل، گوگل و اپرا می باشند. گروه دوم نیز طراحان و توسعه دهندگان وب در این زمینه می باشند. ضعفHTML1.1 و HTML 2 خیلی ساده است، کمپانی های مرورگر فکر می کردند که ایده ی احمقانه است، بنابراین درهای خود را به روی آن بستند.

امروزه بسیاری از مرورگرها به شدت تمایل دارند که از HTML5 پشتیبانی کنند. حتی اینترنت اکسپلورر که درآهستگی تطبیق استانداردهای جدید شهرت دارد، در IE9 خود ازHTML5 پشتیبانی می کند، و این بدین معناست که HTML5 قرار است بزرگ و حقیقی باشد.

از آنجایی که مایکروسافت اعلام کرده که هیچ طرحی برای آزاد کردن IE9 برای یوزرهای ویندوز XP ندارد، اگر تمایل دارید از IE9 استفاده کنید، باید از ویندوز vista sp2 یا 7 استفاده کنید.

هیچ دلیلی وجود ندارد که طراحان تحت تاثیر HTML5 قرار نگیرند، زیرا که زندگی را از همیشه برای ما آسانتر کرده است.

آموزش طراحی سایت

۰ نظر

۰ ۱۲ مهر ۹۸ ، ۱۱:۳۵

افشین رفوا

آموزش react

آموزش React native - قسمت پنجم

دوره آموزش React native

سلام در بخش چهارم آموزش React Native مفاهیم Flex,Flex Direction,Layout Direction,align Items,Align Content,Flex Wrap,Flex Basis، Grow و Shrink,Width و Height در React Native را یاد گرفتیم . حال با بخش چهارم با ما همراه باشید:

دوره آموزش React native

مدیریت ورودی های متنی

کامپوننت Component پایه ای که برای دریافت ورودی از کاربر استفاده می شود TextInput است. این componentیک prop به اسم Text دارد که می توان به آن تابعی داد که پس از هر تغییر متن صدا زده شود. یک prop به اسم Editing دارد که می توان به آن تابعی داد که هنگام ثبت دیتا، صدا زده شود.

برای مثال، فرض کنیم همزمان با تایپ کردن کاربر، قرار است کلمات به زبان دیگری ترجمه شوند. در این زبان جدید ترجمه هر کلمه ای 🍕 است! جمله ی "Hello there Bob" به "🍕🍕🍕" ترجمه می شود.

import React, { Component } from 'react';

import { Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {

constructor(props) {

super(props);

this.state = {text: ''};

}

render() {

return (

<View style={{padding: 10}}>

<TextInput

style={{height: 40}}

placeholder="Type here to translate!"

Text={(text) => this.setState({text})}

value={this.state.text}

<Text style={{padding: 10, fontSize: 42}}>

{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}

</Text>

</View>

);

}

در این مثال، text را درون یک state نگه می داریم، چرا که در طول زمان مقدار آن متغیر است.

کارهای زیادی می توان روی TextInput ها انجام داد. برای مثال، می توان هنگام تایپ کردن کاربر، متن ورودی را اعتبارسنجی کرد. برای مثال هایی با جزئیات بیشتر، مستندات React را ببینید، یا مستندات مربوط به TextInput را ببینید.

دریافت ورودی از کاربر یکی از راه های تعامل با کاربر است. در گام بعد، نگاهی به راه های کار با ورودی های touch کاربر می اندازیم.

دوره آموزش React Native

مدیریت ورودی های touch در React Native

عمده ی تعامل کاربران با application های موبایل از طریق touchاست. آن ها از حرکاتی ترکیبی، مثل زدن یک button، بالا و پایین کردن یک لیست، zoom روی یک نقشه و... استفاده می کنند. React Native، component هایی برای کار با انواع حرکات متداول در اختیار می گذارد. علاوه بر آن یک سیستم جامع gesture responder برای شناسایی حرکات پیچیده تر دارد. اما componentپایه ای عمدتا از آن استفاده می کنیم یک buttonاست.

نمایش یک buttonساده

Button یک component ساده برای نمایش button است که روی همه پلتفرم ها به خوبی render می شود. مثالی ساده برای نمایش یک button در زیر می بینید:

<Button

onPress={() => {

alert('You tapped the button!');

}}

title="Press Me"

این قطعه کد یک برچسب آبی در iOS، و یک مستطیل گرد آبی با متن سفید در androidخواهد بود. فشردن button موجب فراخوانی تابع "onPress" می شود. که در این مثال، این تابع یک pop-upهشدار نمایش می دهد. می توانید یک propبرای "color" تعیین کنید و رنگ button را تغییر دهید.

آموزش React native

مثال زیر کارهای جالب تری با button ها می کند. می توانید خروجی آن را در android و iOS ببینید.

import React, { Component } from 'react';

import { Button, StyleSheet, View } from 'react-native';

export default class ButtonBasics extends Component {

_onPressButton() {

alert('You tapped the button!')

}

render() {

return (

<View style={styles.container}>

<View style={styles.buttonContainer}>

<Button

onPress={this._onPressButton}

title="Press Me"

</View>

<View style={styles.buttonContainer}>

<Button

onPress={this._onPressButton}

title="Press Me"

color="#841584"

</View>

<View style={styles.alternativeLayoutButtonContainer}>

<Button

onPress={this._onPressButton}

title="This looks great!"

<Button

onPress={this._onPressButton}

title="OK!"

color="#841584"

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

buttonContainer: {

margin: 20

alternativeLayoutButtonContainer: {

margin: 20,

flexDirection: 'row',

justifyContent: 'space-between'

}

});

اگر یک button ساده برای application تان کافی نیست، می توانید با استفاده از component های "Touchable" موجود در React Native، button های سفارشی بسازید. این component ها قابلیت دریافت حرکات را دارند، و می توانند با شناسایی حرکات فیدبک مناسب بدهند. این component ها هیچ style پیش فرضی ندارند و برای اینکه ظاهری مناسب به آنها بدهید باید کمی کار کنید.

دوره آموزش React Native

با توجه به نوع فیدبکی که انتظار دارید می توانید از component های "Touchable" متفاوتی استفاده کنید:

عمدتا، می توانید از TouchableHighligh برای مواردی مثل یک link یا button در وب، استفاده کنید. پس زمینه ی view با فشردن button، تیره می شود.

می توانید از TouchableNativeFeedback در android برای نمایش feedback به کاربر استفاده کنید.

می توان از TouchableOpacity برای feedback دادن از طریق کاهش button opacity استفاده کرد.

اگر میخواهید فیدبکی به کاربر نشان ندهید می توانید از TouchableWithoutFeedback استفاده کنید.

در بعضی موارد ممکن است بخواهید فشردن و نگه داشتن یک view برای مدت زمان مشخصی را شناسایی کنید. این فشردن های طولانی از طریق ارسال یک تابع به onLongPress هر component "Touchable" قایل مدیریت است.

آموزش React Native

در مثال زیر می توان این موضوع را تست کرد:

import React, { Component } from 'react';

import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

export default class Touchables extends Component {

_onPressButton() {

alert('You tapped the button!')

}

_onLongPressButton() {

alert('You long-pressed the button!')

}

render() {

return (

<View style={styles.container}>

<TouchableHighlight onPress={this._onPressButton} underlayColor="white">

<View style={styles.button}>

<Text style={styles.buttonText}>TouchableHighlight</Text>

</View>

</TouchableHighlight>

<TouchableOpacity onPress={this._onPressButton}>

<View style={styles.button}>

<Text style={styles.buttonText}>TouchableOpacity</Text>

</View>

</TouchableOpacity>

<TouchableNativeFeedback

onPress={this._onPressButton}

background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>

<View style={styles.button}>

<Text style={styles.buttonText}>TouchableNativeFeedback {Platform.OS !== 'android' ? '(Android only)' : ''}</Text>

</View>

</TouchableNativeFeedback>

<TouchableWithoutFeedback

onPress={this._onPressButton}

<View style={styles.button}>

<Text style={styles.buttonText}>TouchableWithoutFeedback</Text>

</View>

</TouchableWithoutFeedback>

<TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">

<View style={styles.button}>

<Text style={styles.buttonText}>Touchable with Long Press</Text>

</View>

</TouchableHighlight>

</View>

);

}

const styles = StyleSheet.create({

container: {

paddingTop: 60,

alignItems: 'center'

button: {

marginBottom: 30,

width: 260,

alignItems: 'center',

backgroundColor: '#2196F3'

buttonText: {

textAlign: 'center',

padding: 20,

color: 'white'

}

});

بالا و پایین رفتن در لیست ها، swipe کردن، و pinch-to-zoom

از حرکات رایج دیگر در موبایل ها swipe یا pan است. این حرکت به کاربر امکان بالا و پایین رفتن در لیست ها، یا حرکت در صفحات را می دهد. برای کار با اینگونه حرکات، باید کار با ScrollView را یاد بگیریم.

آموزش React Native

استفاده از ScrollView در React Native:

اسکرول ScrollView یک container scroll کلی است که می تواند چندین component و view را در خود نگه دارد. آیتم های قابل scroll لازم نیست هم نوع باشند، و می توان آن ها را هم افقی (با مقداردهی بهprop horizontal) و هم عمودی scroll کرد.

این مثال یک ScrollView با قابلیت scroll عمودی، حاوی ترکیبی از عکس و متن می سازد:

import React, { Component } from 'react';

import { ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {

render() {

return (

<ScrollView>

<Text style={{fontSize:96}}>Scroll me plz</Text>

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Text style={{fontSize:96}}>If you like</Text>

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Text style={{fontSize:96}}>Scrolling down</Text>

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Text style={{fontSize:96}}>What's the best</Text>

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Text style={{fontSize:96}}>Framework around?</Text>

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Text style={{fontSize:80}}>React Native</Text>

</ScrollView>

);

}

اسکرول ScrollView ها می توانند با استفاده از pagingEnabled به گونه ای تنظیم شوند که بتوان چندین صفحه داشت و بین آن ها حرکت کرد. حرکت افقی بین viewها در android نیز با استفاده از component ViewPager قابل پیاده سازی است.

در iOS، یک ScrollView با فقط یک آیتم می تواند برای ایجاد امکان zoom استفاده شود. با تنظیم مقادیر برای maximumZoomScale و minimumZoomScale امکان بزرگ و کوچک کردن محتوا توسط حرکات pinch and expand ممکن خواهد بود.

استفاده از ScrollView برای نمایش تعداد کمی آیتم در سایز محدود مناسب است، چرا که همه المان ها و view های یک ScrollView، render می شوند، حتی اگر در لحظه در صفحه قابل نمایش نباشند. اگر لیست طویلی از آیتم ها دارید که در صفحه جا نمی شود، باید از FlatList ها استفاده کنید. مرحله بعد یادگیری درمورد list view ها خواهد بود.

استفاده از List View در React Native

ری اکت React Native مجموعه ای از component ها برای نمایش لیست ها در اختیار می گذارد. عمدتا از FlatList یا SectionList استفاده می شود.

کامپوننت component FlatList لیستی از دیتای متغیر اما ساختار- ثابتی را نمایش می دهد. FlatList برای لیست های طویل که تعداد آیتم های آن درزمان تغییر می کند، مناسب است. برخلاف ScrollView، FlatList فقط المان هایی که در لحظه روی صفحه قابل نمایش هستند را، render می کند.

کامپوننت component FlatList دو prop لازم دارد: data و renderItem. Data منبع دیتای درون لیست را تعیین می کند. renderItem یک آیتم از منبع برمی دارد ویک component فرمت شده برای render برمی گرداند.

این مثال یک FlatList ساده با دیتای ثابت می سازد. هر آیتم درون data به صورت یک component Text، render می شود. سپس component FlatListBasics، FlatList و همه ی component های Text را render می کند.

import React, { Component } from 'react';

import { FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {

render() {

return (

<View style={styles.container}>

<FlatList

data={[

{key: 'Devin'},

{key: 'Dan'},

{key: 'Dominic'},

{key: 'Jackson'},

{key: 'James'},

{key: 'Joel'},

{key: 'John'},

{key: 'Jillian'},

{key: 'Jimmy'},

{key: 'Julie'},

]}

renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

paddingTop: 22

item: {

padding: 10,

fontSize: 18,

height: 44,

})

زمانی که بخواهیم دیتا را درون یک ساختار منطقی بشکنیم، و احتمالا هر قسمت یک تیتر داشته باشد، SectionList به کار می آید که عملکردی مشابه UITableView ها در iOS دارد.

import React, { Component } from 'react';

import { SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {

render() {

return (

<View style={styles.container}>

<SectionList

sections={[

{title: 'D', data: ['Devin', 'Dan', 'Dominic']},

{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},

]}

renderItem={({item}) => <Text style={styles.item}>{item}</Text>}

renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}

keyExtractor={(item, index) => index}

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

paddingTop: 22

sectionHeader: {

paddingTop: 2,

paddingLeft: 10,

paddingRight: 10,

paddingBottom: 2,

fontSize: 14,

fontWeight: 'bold',

backgroundColor: 'rgba(247,247,247,1.0)',

item: {

padding: 10,

fontSize: 18,

height: 44,

})

یکی از رایج ترین کاربردهای List View نمایش دیتای دریافتی از server است. برای این کار لازم است درمورد ارتباطات تحت شبکه در React Native بدانیم.

آموزش React Native

با ادامه آموزش ششم همراه با باشید

۰ نظر

۰ ۰۴ مهر ۹۸ ، ۱۵:۴۶

افشین رفوا

آموزش react native رایگان

دوره آموزش React Native - بخش چهارم

آموزش React Native - بخش چهارم

دوره آموزش React Native

سلام در بخش سوم آموزش React Native مفاهیم component , Props, State, Style, Widthو Height در React Native را یاد گرفتیم . حال با بخش چهارم با ما همراه باشید:

آموزش Layout با استفاده از Flexbox

یک component می تواند چیدمان component های childخودرا با استفاده از algorithm Flexbox تعیین کند. Flexbox برای ایجاد یک Layout پایدار روی صفحات با سایزهای مختلف طراحی شده است.

با استفاده از ترکیبی از flexDirection، alignItems، و justifyContent می توان Layout مناسب طراحی کرد.

فلکس باکس Flexbox در React Nativeشبیه CSS عمل می کند. با این تفاوت که مقادیر پیش فرض متفاوتند. flexDirection به جای row، مقدار پیش فرض column دارد، و flexفقط یک عدد می گیرد.

دوره آموزش React Native

فلکس Flex

فلکس Flex تعیین می کند آیتم ها چگونه در عرض محور اصلی، فضای موجود را پر کنند. فضا برحسب مقدار flex مربوط به هر المان، تقسیم بندی می شود.

در مثال زیر، view های قرمز، زرد و سبز هر سه childهای Viewبا flex:1 هستند. view قرمز از flex: 1 استفاده می کند، viewزرد flex: 2 و view سبز flex: 3. جمع مقادیر flex این سه 6 است که به این معناست که view قرمز 6/1 فضا، viewزرد 6/2 و view سبز 6/3 فضا را می گیرد.

دوره آموزش React Native

فلکس Flex Direction

دوره آموزش React Native

فلکس Flex Direction جهت چیدمان childهای یک nodeرا تعیین می کند. به آن محور اصلی نیز می گویند. محور دیگر، محور متقاطع، محور عمود به محور اصلی است، یا همان محوری است که خطوط wrapping را دربرمیگیرد.

کامپوننت Row componentهای child را از چپ به راست میچیند. اگر wrapping فعال باشد، خط بعد دقیقا از زیر اولین آیتم از چپ شروع می شود.

ستون Column(مقدار پیش فرض) component های child را از بالا به پایین می چیند. اگر wrapping فعال باشد، خط بعد از اولین آیتم سمت چپ از بالا شروع می شود.

کامپوننت row-reverse component های child را از راست به چپ میچیند. اگر wrapping فعال باشد، خط بعد از زیر اولین آیتم از راست شروع می شود.

کامپوننت column-reverse component های child را از پایین به بالا می چیند. اگر wrapping فعال باشد، خط بعدی اولین آیتم سمت چپ از پایین شروع می شود.

import React, { Component } from 'react';

import { View } from 'react-native';

export default class FlexDirectionBasics extends Component {

render() {

return (

// Try setting `flexDirection` to `column`.

<View style={{flex: 1, flexDirection: 'row'}}>

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />

</View> ); }};

دوره آموزش React Native

لایه Layout Direction

آموزش پروژه محور react native

لایه Layout Directionتعیین کننده ی جهتی است که در آن childها و متن در یک سلسله مراتب باید چیده شوند. Layout Directionتعیین کننده این هستند که start و end به کدام لبه ها اشاره می کنند. به طور پیش فرض چیدمان صفحات در React Native بصورت LTR است. در این حالت start به چپ و endبه راست اشاره می کند.

ال تی ار LTR (مقدار پیش فرض) متن ها و child ها از چپ به راست چیده می شوند. Margin و paddingکه برای start یک المان تعیین می شوند به سمت چپ اعمال می شوند.

ال تی ار RTLمتن ها و child ها از راست به چپ چیده می شوند. Margin و paddingکه برای start یک المان تعیین می شوند به سمت راست اعمال می شوند.

تراز کردن محتوا (justify Content)

محتوای justifyContentنحوه قرار گرفتن childها در راستای محور اصلی container شان را تعیین می کند. برای مثال، می توانید با استفاده از این ویژگی یک المان child را وسط یک containerقرار دهید؛ به این صورت که برای افقی وسط بودن، flexDirection را مساوی rowقرار دهید، برای عمودی وسط بودن، flexDirectionرا مساوی column قرار دهید.

فلکس flex-start(مقدار پیش فرض) child های یک container را از ابتدای محور اصلی آن، مرتب می کند.

فلکس flex-end child های یک container را از انتهای محور اصلی آن، مرتب می کند.

مرکز Center child های یک container را در راستای محور اصلی، وسط قرار می دهد.

فضای space-betweenالمان های child را در راستای محور اصلی container قرار می دهد و فضای اضافه را بین آن ها توزیع می کند.

فضای space-around المان های childرا در راستای محور اصلی container قرار می دهد و فضای اضافه را اطراف آن ها توزیع می کند. در مقایسه با space-between، فضای اضافه به ابتدا و انتهای اولین و آخرین child افزوده می شود.

import React, { Component } from 'react';

import { View } from 'react-native';

export default class JustifyContentBasics extends Component {

render() {

return (

// Try setting `justifyContent` to `center`.

// Try setting `flexDirection` to `row`.

<View style={{

flex: 1,

flexDirection: 'column',

justifyContent: 'space-between',

}}>

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />

</View>

);

}

};

دوره آموزش React Native

تراز کردن آیتم ها (align Items)

آموزش پروژه محور react native

تراز کردن آیتم ها alignItems تعیین کننده نحوه قرار گرفتن childها در راستای محور متقاطع container است. بسیار شبیه justifyContentعمل می کند، اما به جای اعمال شدن به محور اصلی، روی محور متقاطع اعمال می شود.

استرتچ Stretch(مقدار پیش فرض) child های یک container را امتداد می دهد تا کامل محور متقاطع را بگیرند و height معادل محور متقاطع داشته باشند.

فلکس flex-start child های یک container را از ابتدای محور متقاطع آن، مرتب می کند.

فلکس flex-end child های یک container را از انتهای محور متقاطع آن، مرتب می کند.

مرکز Center child های یک container را در راستای محور متقاطع ، وسط قرار می دهد.

لاین Baselineالمان های child را نسبت به یک نقطه مشترک مرتب می کند. المان های childمی توانند طوری تنظیم شوند که نقطه ارجاعی برای parentشان باشند.

برای اینکه استفاده از Stretch موثر باشد، المان child نباید در راستای محور دیگر بعد ثابت داشته باشد. در مثال زیر، مقداردهی به صورت alignItems: stretchاثری ندارد، مگر زمانی که width: 50از المان child حذف شود.

import React, { Component } from 'react';

import { View } from 'react-native';

export default class AlignItemsBasics extends Component {

render() {

return (

// Try setting `alignItems` to 'flex-start'

// Try setting `justifyContent` to `flex-end`.

// Try setting `flexDirection` to `row`.

<View style={{

flex: 1,

flexDirection: 'column',

justifyContent: 'center',

alignItems: 'stretch',

}}>

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

<View style={{height: 50, backgroundColor: 'skyblue'}} />

<View style={{height: 100, backgroundColor: 'steelblue'}} />

</View>

);

}

};

دوره آموزش React Native

AlignSelf

ا alignSelfموارد مشابهی دارد و مثل alignItemsعمل می کند اما به جای اثر روی childدرون container، می توان آن را روی یک المان اعمال کرد ومستقل از parent، آن را تغییر داد. alignSelf هرچیزی که توسط alignItems و از طریق parentاعمال شده را، بی اثر می کند.

دوره آموزش React Native

محتوای Align Content

آموزش پروژه محور react native

محتوای alignContentتوزیع خطوط در راستای محور عرضی را تعیین می کند. فقط زمانی اثر آن اعمال می شود که آیتم ها با استفاده از flexWrapدر چندین خط شکسته (wrapped) شوند.

فلکس flex-start(مقدار پیش فرض) خطوط شکسته (wrappedشده) را از ابتدای محور متقاطع containerمرتب می کند.

فلکس flex-endخطوط شکسته را از انتهای محور متقاطع containerمرتب می کند.

در Stretchخطوط شکسته را امتداد می دهد تا کامل محور متقاطع container را پر کنند.

مرکز centerخطوط شکسته را در راستای محور متقاطع container، وسط قرار می دهد.

فضای space-between خطوط شکسته را در راستای محور اصلی container قرار می دهد و فضای اضافه را بین آن ها توزیع می کند.

فضای space-aroundخطوط شکسته را در راستای محور اصلی containerقرار می دهد و فضای اضافه را اطراف آن ها توزیع میکند. در مقایسه با space-between، فضای اضافه به ابتدا و انتهای اولین و آخرین خط افزوده میشود.

دوره آموزش React Native

فلکس Flex Wrap

دوره آموزش React Native

ویژگی flexWrapروی container ها مقداردهی می شود و به کمک آن می توان تعیین کرد هنگامی که المان های childدر راستای محور اصلی از container بیرون میزنند، چه اتفاقی بیوفتد. به طور پیش فرض المان های child باید در یک خط قرار بگیرند ( که ممکن است باعث جمع شدن غیرعادی المان ها شود). اگر شکستن خطوط (wrapping) ممکن باشد، آیتم ها در راستای محور اصلی در چند خط شکسته می شوند.

موقع شکستن خطوط می توان از alignContent برای تعیین چگونگی قرارگیری خطوط در container، استفاده کرد.

دوره آموزش React Native

فلکس Flex Basis، Grow و Shrink

دوره آموزش React Native

فلکس flexGrowتعیین می کند چگونه فضای درون containerبین المان های child در راستای محور اصلی، توزیع شود. پس از قرارگرفتن المان های child درون container ، فضای باقی مانده با توجه به مقدار این متغیر در المان های child، توزیع می شود.

فلکس flexGrow هر مقدار اعشاری بزرگ تر 0 را می پذیرد و صفر مقدار پیش فرض آن است. یک container براساس مقدار flexGrowالمان های child خود، فضای باقی مانده را بین آن ها توزیع می کند.

فلکس flexShrinkتعیین می کند چگونه المان های childدر راستای محور اصلی کوچک شوند، در صورتی که اندازه آن ها از اندازه container شان درراستای محور اصلی، بیشتر شود. FlexShrink بسیار شبیه flexGrowعمل می کند و استفاده هم زمان از هر دو کمک می کند المان های child براساس نیاز بزرگ یا کوچک شوند.

فلکس flexShrinkهر مقدار اعشاری بزرگ تر 0 را می پذیرد و مقدار پیش فرض آن یک است. یک containerبراساس مقدار flexShrink المان های child خود، آن ها را کوچک می کند.

فلکس FlexBasisیک روش مستقل از محور برای تعیین اندازه پیش فرض یک آیتم در راستای محور اصلی است. مقداردهی به flexBasis برای یک المان child شبیه مقداردهی به widthآن المان است، درصورتی که parentآن flexDirection: row داشته باشد، و یا مقداردهی hight به آن المان درصورتی که parent آن flexDirection: column داشته باشد. مقدار FlexBasisیک آیتم، سایز آن آیتم است؛ سایز پیش فرضی که قبل از هرگونه بزرگ و کوچک شدن المان به آن اختصاص می یابد.

ارتفاع و پهنا Width و Height

دوره آموزش React Native

مقدار Widthیک المان نشان دهنده ی Width محتوای آن المان است. به طور مشابه، Height یک المان Heightمحتوای آن است.

می توان به هردو مقادیر زیر را نسبت داد:

اتو Auto مقدار پیش فرض است. React Native مقادیر width/height را برای المان بر اساس محتوایش محاسبه می کند.

پیکسل Pixelsتعیین کننده width/height براساس pixel به صورت absoluteمی باشد. با توجه به استایل های دیگر component، این مقادیر ممکن است اندازه نهایی ابعاد componentباشند یا نباشند.

درصد Percentageتعیین کننده width یا height یک component به صورت درصدی از width یا height المان parent آن می باشد.

لایه Layoutهای relative و absolute

نوع positionیک المان تعیین کننده نحوه قرار گرفتن آن نسبت به المان parent اش می باشد.

نسبی Relative(مقدار پیش فرض) به طور پیش فرض یک المان مکانی نسبی دارد. به این معنا که یک المان، اول با توجه به جایگیری نرمال آیتم ها، و سپس براساس مقادیر top، right، bottom و leftنسبت به مکان مورد انتظار، قرار می گیرد. این انحراف، بر مکان sibling element ها، و یا جای المان parentتاثیری ندارد.

مطلق Absoluteاگر المانی به طور مطلق جایی قرار گرفته باشد، در جایگیری نرمال آیتم ها شرکت نمی کند، مستقل از المان های siblingخود قرار می گیرد و مکان دقیقش به کمک مقادیر top ، right، bottom و leftتعیین میشود.

دوره آموزش React Native

نگاهی عمیق تر

میتوانید برای فهم بهتر flexbox از این لینک استفاده کنید.

ما در اینجا به مفاهیم پایه پرداختیم، اما style های زیادی هستند که برای layoutهای خود به آن نیاز خواهید داشت. لیست کامل propهایی که برای کار با layout لازم است در اینجا قابل مشاهده است.

گام به گام به ساخت یک application واقعی نزدیک می شویم. یکی از مواردی که هنوز به آن نپرداخته ایم نحوه دریافت ورودی از کاربر است که در بخش بعد به آن می پردازیم.

می توانید در این مقاله، چند مثال از Wix Engineersببینید.

دوره آموزش React Native

۰ نظر

۰ ۰۴ مهر ۹۸ ، ۱۵:۴۴

افشین رفوا

آموزش react native فارسی

آموزش پروژه محور React Native

سلام در بخش دوم آموزش React Native محیطهای اجرا React Native در android، iOS و Mac و iOS را آموزش دادیم حال با بخش سوم با ما همراه باشید:

در بخش اول آموزش React Native با مفاهیم پایه React Native آشنا شدیم

در ادامه برنامه ای را اجرا می کنیم

آموزش React Native

اولین برنامه، Hello World!

طبق سنت قدیمی برنامه نویس ها، اولین برنامه ما یک applicationساده است که هیچ کار نمی کند جز اینکه یک Hello, World! ساده را نشان دهد:

import React, { Component } from 'react';

import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {

render() {

return (

<Text>Hello, world!</Text>

</View>

);

}

آموزش React Native

اگر دوست دارید کمی کنجکاوی کنید، می توانید در شبیه سازهای تحت وب با کدها کار کنید. میتوانید کد را در فایل App.js روی سیستم خودتان بگذارید و یک app روی سیستم خودتان بسازید.

چه اتفاقی می افتد؟

کدهایی که نوشتیم ممکن است اصلا شبیه جاوا اسکریپت نباشد. نگران نباشید، این آینده ی جاوا اسکریپت است.

ES2015 یا همان ES6مجموعه ای از تغییرات روی جاوا اسکریپت است که حالا بخشی از استاندارد رسمی آن شده، اما هنوز همه ی مرورگرها از آن پشتیبانی نمی کنند، به همین دلیل هنوز به قدر کافی در زمان developبرای وب استفاده نمی شوند. React Native از ES2015 پشتیبانی می کند. می توانید از آن بدون هیچ دغدغه ای درمورد سازگاری استفاده کنید. کلمات کلیدی مثل import، from، class، extends در مثال بالا همه از ویژگی های ES2015هستند. اگر با ES2015آشنا نیستید، احتمالا فقط با خواندن همین آموزش آن را یاد می گیرید. این صفحه (لینک) مروری روی ویژگی های ES2015 دارد.

قطعه کد نامعمول دیگر این مثال <View><Text>Hello world!</Text></View> است. این JSXاست. این syntax است که XML را درون جاوااسکریپت می نشاند. Frameworkهای زیادی از زبان قالبی خاصی استفاده می کنند که به شما اجازه استفاده از کد درون markup language را بدهد. این syntax شبیه Html تحت وب به نظر می رسد، با این تفاوت که به جای استفاده از المان هایی چون <div> یا <span>، از component های React استفاده می شود. در این مثال، <Text> یک component آماده است که متنی را نشان می دهد و View مثل > یا <span>است.

آموزش React Native

کامپوننت ها component

این قطعه کد یک component جدید را تعریف می کند.

وقتی یک application React Native می نویسید چندین component خواهید داشت. هرچیز که روی صفحه می بینید یک componentمحسوب می شود. یک component می تواند بسیار ساده باشد. تنها چیزی که نیاز دارد یک تابع render است که JSX برای render شدن برمی گرداند.

این app کار زیادی نمی کند. برای اینکه با component ها کارهای جالبتری انجام دهیم باید درمورد Propsبدانیم.

پروپ Props در React Native component ها

اغلب component ها هنگام initialize می توانند با پارمترهای مختلفی سفارشی سازی شوند. این پارامترهای زمانِ ساخت، Propsنامیده می شوند.

برای مثال، یک componentاصلی در React Native، Imageاست. وقتی یک Image می سازید، می توانید از یک prop به نام sourceاستفاده کنید و با مقداردهی به آن، تصویر موردنظرتان را تعیین کنید:

import React, { Component } from 'react';

import { AppRegistry, Image } from 'react-native';

export default class Bananas extends Component {

render() {

let pic = {

uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'

};

return (

);

}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => Bananas);

به آکولاد استفاده شده در {pic} توجه کنید. آن ها متغیر pic را درون یک JSX می گنجانند. می توانید هر عبارت جاوااسکریپتی را با قرار دادن درون آکولاد، در JSXاستفاده کنید.

کامپوننت ها componentهایی که خود می سازید هم میتواند از props استفاده کند. این ویژگی به شما اجازه میدهد از یک component، اما با ویژگی های کمی متفاوت از یکدیگر، در جاهای مختلف applicationاستفاده کنید. مثال زیر چگونگی این کار را ، با referenceدادن به this.props در تابع render، نشان می دهد:

import React, { Component } from 'react';

import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {

render() {

return (

<Text>Hello {this.props.name}!</Text>

</View>

);

}

export default class LotsOfGreetings extends Component {

render() {

return (

</View>

);

}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);

آموزش React Native

استفاده از name به عنوان یک prop، به ما امکان سفارشی کردن component Greeting را می دهد، می توانیم از این componentبارها با مقادیر مختلف استفاده کنیم. این مثال از این component، درست مثل component های اصلی، در JSX نیز استفاده می کند. این امکان دقیقا همان چیزی است که باعث جذابیت Reactشده. اگر حس کنید component های متفاوتی برای کارتان احتیاج دارید، می توانید خودتان آن ها را بسازید.

نکته جدید دیگری که در این کد می بینیم، component Viewاست. Viewبه عنوان ظرفی برای component های دیگر استفاده می شود، و کنترل style و layout را ممکن می کند.

با استفاده از props و component های اصلی Text، Image، و View، می توانید صفحات ثابت زیادی درست کنید. برای اینکه بتوانید application خود را با دیتای متغیر بسازید، باید درمورد State ها بدانید.

استیت State ها در React Native component ها

دو نوع دیتا وجود دارد که یک component را کنترل می کند: props و state. Propsتوسط component parentمقداردهی می شوند و در طول چرخه حیات componentثابت هستند. برای دیتای متغیر، از state استفاده می کنیم.

به طور کلی، باید state را در سازندهinitialize کنید، و سپس با فراخوانی setStateمقدار آن را تغییر دهید.

برای مثال، می خواهیم متنی بسازیم که حالت blinkداشته باشد. متن یک بار موقع ساخته شدن component مربوطه، مقداردهی می شود. پس متنی به تنهایی یک prop است. این مسئله که "متن دراین لحظه نمایش داده شود یا نشود" در طول زمان متغیر است، پس باید درون state نگه داری شود.

import React, { Component } from 'react';

import { Text, View } from 'react-native';

class Blink extends Component {

componentDidMount(){

// Toggle the state every second

setInterval(() => (

this.setState(previousState => (

{ isShowingText: !previousState.isShowingText }

))

), 1000);

}

//state object

state = { isShowingText: true };

render() {

if (!this.state.isShowingText) {

return null;

}

return (

<Text>{this.props.text}</Text>

);

}

export default class BlinkApp extends Component {

render() {

return (

<View>

</View>

);

}

آموزش React Native

در یک application واقعی، معمولا state را با یک timer مقداردهی نمی کنیم. ممکن است state را زمانی مقداردهی کنیم که دیتای جدیدی از serverدریافت کرده باشیم، یا ورودی از کاربر گرفته باشیم. بعلاوه، می توان از یک state container مثل Redux یا Mobxبرای کنترل دیتا استفاده کرد. دراین حالت، به جای صدا زدن setState به طور مستقیم، از Redux یا Mobxبرای تغییر stateاستفاده می کنیم.

وقتی setState فراخوانی می شود، BlinkApp، component خود را دوباره render می کند. با فراخوانیsetState از طریق Timer، component با هر تغییر در Timer ، دوباره render می شود.

استیت ها State در اینجا کاملا مشابه React عمل می کند. برای مطالعه بیشتر درمورد نحوه کار با state می توانید به React.Component API مراجعه کنید. تا اینجا اکثر مثال های ما متن های ساده ای بودند. برای ساختن چیزهای جذابتر، باید درمورد style بدانیم.

استایل Style ها در React Native

در React Native، برای تعریف style از syntax یا زبان خاصی استفاده نمی کنیم. application را با استفاده از جاوااسکریپت style می دهیم. همه component های اصلی یک prop به نام styleدارند. اسامی و مقادیر styleمعمولا شبیه CSS در وب کار می کند، با این تفاوت که اسامی به صورت camel casingانتخاب می شوند، مثلا backgroundColor (و نه background-color).

استایل Style می تواند یک plain old JavaScript object (POJO) باشد. این ساده ترین و پرکاربرد ترین روش style دادن است. همچنین می توانید آرایه ای از style ها را پاس دهید، آخرین عضو آرایه مقدم تر است، و می توان از این روش برای ارث بری style ها استفاده کرد.

همچنان که یک componentپیچیده تر می شود، بهتر است با استفاده از StyleSheet.createچندین style در یک جا تعریف کنیم. مثال زیر را ببینید:

import React, { Component } from 'react';

import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({

bigBlue: {

color: 'blue',

fontWeight: 'bold',

fontSize: 30,

red: {

color: 'red',

});

export default class LotsOfStyles extends Component {

render() {

return (

<View>

<Text style={styles.bigBlue}>just bigBlue</Text>

<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>

<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>

</View>

);

}

آموزش React Native

یک الگوی رایج این است که component یک styleبپذیرد که بعد برای styleدادن به component child های آن استفاده شود. می توانید با استفاده از این قابلیت به شیوه ی CSSاستایل های "cascade" ایجاد کنید.

راه های زیادی برای ایجاد style های سفارشی برای متن ها هست. برای لیست کامل آن می توانید به این لینک مراجعه کنید.

حال می توانید متن های جذابی درست کنید. گام بعد در تسلط به استایل دهی این است که سایز component ها را کنترل کنید.

ارتفاع و پهنا Widthو Height در React Native component

width وheight یک componentتعیین کننده سایز آن روی صفحه است.

ابعاد ثابت

ساده ترین راه مقداردهی به ابعاد یک componentمقداردهی ثابت به width و height در هنگام استفاده از styleاست. تمام ابعاد در React Native بدون واحد هستند، و نشان دهنده density-independent pixel هاهستند.

import React, { Component } from 'react';

import { AppRegistry, View } from 'react-native';

export default class FixedDimensionsBasics extends Component {

render() {

return (

<View>

</View>

);

}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

تعیین مقادیر ابعاد به این شکل برای componentهایی که مستقل از ابعاد صفحه، همیشه در سایز مشخصی render میشوند رایج است.

ابعاد منعطف

استفاده از flex در هنگام تعریف styleبرای یک component، به این معناست که ابعاد آن می تواند برحسب میزان فضای موجود تغییر کند. معمولا از flex: 1استفاده می شود؛ که به component می گوید فضای موجود را پر کند و آن را با component های دیگر که parentیکسانی دارند، متناسب به اشتراک می گذارد. هرچه مقدار بزرگتری به flexبدهیم، نسبت فضایی که component می گیرد، نسبت با component های sibiling، بیشتر خواهد بود.

یک component فقط زمانی می تواند بزرگ شود و فضای موجود را بگیرد که component parent آن، دارای ابعاد بیشتر از 0 باشد. اگر parent آن مقادیر ثابتی برای height و width و flexنداشته باشد، ابعادی معادل 0 دارد و component child آن با وجود داشتن flex، قابل مشاهده نخواهد بود.

import React, { Component } from 'react';

import { AppRegistry, View } from 'react-native';

export default class FlexDimensionsBasics extends Component {

render() {

return (

// Try removing the `flex: 1` on the parent View.

// The parent will not have dimensions, so the children can't expand.

// What if you add `height: 300` instead of `flex: 1`?

</View>

);

}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);

پس از اینکه یاد گرفتیم چطور سایز component را تغییر دهیم، زمان آن رسیده که بدانیم چطور آن را روی صفحه قرار دهیم. این آموزش ادامه دارد

پایان بخش سوم آموزش React Native

۰ نظر

۰ ۰۴ مهر ۹۸ ، ۱۵:۴۱

افشین رفوا

آموزش پروژه محور react native

دوره آموزش react native

آموزش React Native قسمت دوم

سلام در بخش اول آموزش React Native با Expo CLI آشنا شده و یک Application React Native را اجرا کردیم در ادامه با React Native CLI برخورد کردیم و قرار شد روی محیطهای مختلف اجرا داشته باشیم.

نصب Android Studio و Android SDK را یادگرفته و با ابزار Watchman آشنا شده و یک application React Native را اجرا کردیم حال بخش دوم را شروع می کنیم

محیط اجرا : android، iOS

نصب پیش نیازها

برای اینکار به Node، Watchman، خط فرمان React Native، و JDK و Android Studio نیاز دارید.

می توانید از هر ویرایشگری برای توسعه application خود استفاده کنید، با این حال Android Studio را برای راه اندازی ابزارهای مورد نیاز برای build کردن application React Native خود برای android، لازم خواهید داشت.

نصب Node, Watchman, JDK

توصیه می شود برای نصب این سه از Homebrew استفاده کنید. بعد از نصب Homebrew، دستورات زیر را در ترمینال اجرا کنید:

brew install node

brew install watchman

brew tap AdoptOpenJDK/openjdk

brew cask install adoptopenjdk8

اگر Node را قبلا روی سیستم خود نصب کرده اید، مطئمن شوید version آن 8.3 به بالا باشد.

واچ من Watchman ابزاری برای Facebook برای دنبال کردن تغییرات در فایل سیستم است. پیشنهاد می کنم برای performance بهتر آن را نصب کنید.

اگر قبلا JDK را نصب کرده اید، مطمئن شوید که از version 8 آن یا جدیدتر، استفاده می کنید.

ابزار React Native CLI

نود Node با npm همراه است، که به شما امکان نصب خط فرمان React Native CLI را می دهد.

دستورات زیر را در ترمینال اجرا کنید.

npm install -g react-native-cli

اگر به خطایی مثل Cannot find module 'npmlog' برخوردید، npm را مستقیم نصب کنید: curl -0 -L https://npmjs.org/install.sh | sudo sh

آموزش React Native

محیط توسعه android

اگر در ابتدای راه توسعه ی android باشید، راه اندازی محیط توسعه android کار خسته کننده ای است. اگر با توسعه android آشنا هستید، مواردی هست که باید config شوند. درهر دو حالت، گام های بعدی را با دقت دنبال کنید.

1. نصب Android Studio

اندروید استودیو Android Studio را دانلود و نصب کنید. گزینه ی “Custom” را را موقع انتخاب نوع نصب، انتخاب کنید. تمام موارد زیر باید تیک خورده باشند:

Android SDK
Android SDK Platform
Performance (Intel ® HAXM) (ببینید AMDبرای )
Android Virtual Device

گزینه “Next” را بزنید تا component های بالا نصب شوند.

اگر باکس های موارد بالا غیرفعالند میتوانید بعدا component مربوطه را نصب کنید.

1. نصب Android SDK

اندروید Android Studio به طور پیش فرض آخرین نسخه SDK را نصب می کند. با این حال، build کردن React Native application به همراه کد native، نیاز به Android 9 (Pie) SDK دارد. SDK های دیگر از طریق SDK Manager در Android Studio قابل نصب هستند.

از صفحه ی "Welcome to Android Studio" گزینه ی "Configure" را انتخاب کنید. سپس "SDK Manager" را انتخاب کنید.

Android Studio

حال "SDK Manager" را میتوان در قسمت "Preferences" در خود Android Studio، از مسیر Appearance & Behavior → System Settings → Android SDK پیدا کرد.

تب "SDK Platforms" را در SDK Manager انتخاب کنید، سپس باکس کنار "Show Package Details" را در گوشه پایین سمت راست انتخاب کنید. (Android 9 (Pie را پیدا کنید، آن را باز کنید و موارد زیر را تیک بزنید:

Android SDK Platform 28
Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

سپس تب "SDK Tools" را بزنید و باکس کنار "Show Package Details" را هم تیک بزنید. "Show Package Details" را پیدا کنید، آن را باز کنید و مطمئن شوید 28.0.3 انتخاب شده باشد.

در آخر، دکمه Apply را بزنید تا Android SDK و بقیه ابزارهای build نصب شوند.

1. اندروید config ANDROID_HOME environment variable

ابزارهای React Native برای build کردن application با کد native، نیاز به متغیرهای محیطی (environment variable) دارند.

خطوط زیر را به فایل $HOME/.bash_profile یا $HOME/.bashrc اضافه کنید:

export ANDROID_HOME=$HOME/Library/Android/sdk

export PATH=$PATH:$ANDROID_HOME/emulator

export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/tools/bin

export PATH=$PATH:$ANDROID_HOME/platform-tools

حال .bash_profile مختص bash است. اگر از Shell دیگری استفاده می کنید، فایل تنظیمات مخصوص آن shell را باید تغییر دهید.

با تایپ کردن source $HOME/.bash_profile فایل را در shell باز کنید. با اجرای دستور echo $PATH بررسی کنید ANDROID_HOME به path اضافه شده باشد.

مطمئن شوید که از مسیر صحیح Android SDK استفاده می کنید. می توانید مکان SDK را در Android Studio در بخش "Preferences"، در مسیر Appearance & Behavior → System Settings → Android SDK چک کنید.

دوره آموزش React Native

ساخت یک application

توسط خط فرمان React Native یک پروژه ی React Native جدید به اسم AwesomeProject ایجاد کنید:

react-native init AwesomeProject

اگر می خواهید React Native را در یک application موجود ادغام کنید، یا اگر از Expo (یا Create React Native App) پروژه ای را eject کرده اید، یا اگر می خواهید پشتیبانی از iOS را به یک پروژه ی React Native اضافه کنید(کد پلتفرم-محور را ببینید)، این کار لازم نیست. همچنین میتوانید از CLI های دیگری مثل Ignite CLI برای ساخت application React Native خود استفاده کنید.

استفاده از یک version خاص

اگر می خواهید پروژه جدیدی را با یک version خاص از React Native بسازید، میتوانید از آرگومان –version استفاده کنید:

react-native init AwesomeProject --version X.XX.X

react-native init AwesomeProject --version react-native@next

آماده سازی device android

به یک device android نیاز دارید که application android React Native خود را روی آن اجرا کنید. می تواند یک موبایل باشد یا می توانید از Android Virtual Device به عنوان شبیه ساز device android روی کامپیوتر خود استفاده کنید.

درهرصورت، باید device را برای اجرای application درهنگام توسعه، آماده کنید.

استفاده از یک device فیزیکی

اگر یک device android واقعی دارید، میتوانید به جای AVD از آن هنگام توسعه استفاده کنید. device را با کابل USB به کامپیوتر وصل کنید و دستورالعمل اینجا را دنبال کنید.

استفاده از یک Virtual device

اگر با Android Studio پروژه ی ./AwesomeProject/android را باز کنید، می توانید لیستی از virtual device android ها را از بخش "AVD Manager" ببینید. دنبال آیکنی شبیه عکس زیر بگردید:

استفاده از یک Virtual device

اگر تازه Android Studio را نصب کرده باشید، احتمالا باید یک AVDجدید بسازید. گزینه ی "Create Virtual Device..." را بزنید، سپس یکی از موبایل ها را از لیست انتخاب کنید و روی "Next" کلیک کنید. سپس Image Pie API Level 28 را انتخاب کنید.

اگر HAXM را نصب ندارید، این دستورالعمل را برای راه اندازی آن دنبال کنید، سپس به AVD Manager بازگردید.

روی "Next" و سپس "Finish" کلیک کنید. در این لحظه برای راه اندازی AVD ساخته شده، روی دکمه مثلثی سبز کنار AVD تان کلیک کنید . سپس به مرحله بعد بروید.

اجرای یک application React Native

از دستور react-native run-android در پوشه ی مربوط به پروژه تان استفاده کنید:

cd AwesomeProject

react-native run-android

اگر همه چیز درست انجام شده باشد باید application در شبیه ساز android اجرا شود.

اجرای یک application React Native

دستور react-native run-android فقط یکی از راه های اجرای برنامه است. می توانید مستقیما از داخل Android Studio آن را اجرا کنید.

اگر دراین روش با مشکل مواجه شدید صفحه Troubleshooting را ببینید.

دوره آموزش React Native

تغییر در application

حال که توانستید بدون مشکل application را اجرا کنید، می توانید آن را تغییر دهید.

فایل App.js را در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید.
کلید R را دوبار فشاردهید یا گزینه ی Reload از منوی Developer (⌘M) را بزنید تا تغییرات را ببینید.

تمام شد!

تبریک می گویم. شما اولین برنامه React Native خود را اجرا کرده اید!

قدم بعدی؟

از منوی Developer، Live Reload را فعال کنید. اکنون برنامه با هر تغییری در کد، به طور اتوماتیک reload می شود.
اگر می خواهید به یک application موجود، کد React Native اضافه کنید بخش راهنمای ادغام application های موجود با React Native را ببینید.

محیط اجرا : Mac و iOS:

نصب پیش نیازها

برای اینکار به Node، Watchman، خط فرمان React Native، و XCode نیاز دارید.

می توانید از هر ویرایشگری برای توسعه application خود استفاده کنید، با این حال XCode برای راه اندازی ابزارهای مورد نیاز برای build کردن application React Native برای iOS لازم است.

نصب Node, Watchman, JDK

توصیه می شود برای نصب این سه از Homebrewاستفاده کنید. بعد از نصب Homebrew، دستورات زیر را در ترمینال اجرا کنید:

brew install node

brew install watchman

brew tap AdoptOpenJDK/openjdk

brew cask install adoptopenjdk8

اگر Node را قبلا روی سیستم خود نصب کرده اید، مطئمن شوید version آن 8.3 به بالا باشد.

اگر قبلا JDK را نصب کرده اید، مطمئن شوید که از version 8 آن یا جدیدتر، استفاده می کنید.

ابزار React Native CLI

نود Node با npm همراه است، که به شما امکان نصب خط فرمان React Native CLI را می دهد.

دستورات زیر را در ترمینال اجرا کنید.

npm install -g react-native-cli

اگر به خطایی مثل Cannot find module 'npmlog' برخوردید، npm را مستقیم نصب کنید: curl -0 -L https://npmjs.org/install.sh | sudo sh

ایکس کود Xcode

راحتترین روش نصب Xcode، استفاده از Mac App Store است. نصب Xcode با نصب شبیه ساز iOS و همه ابزارهای مورد نیاز build برای application iOS ها همراه خواهد بود.

اگر قبلا Xcode را نصب کرده اید، مطمئن شوید version 9.4 یا جدیدتر آن باشد.

دوره آموزش React Native

ابزار خط فرمان

باید ابزار خط فرمان Xcode (Xcode Command Line Tools) را نیز نصب کنید. Xcode را باز کنید و از منوی آن Preferences را انتخاب کنید. به پنل Locations بروید . در بخش Command Line Toolsجدیدترین version ابزار Command Line Tools را پیدا کرده و آن را نصب کنید.

ابزار خط فرمان

ساخت یک application

توسط خط فرمان React Native یک پروژه ی React Native جدید به اسم AwesomeProject ایجاد کنید:

react-native init AwesomeProject

ر را ببینید)، این کار لازم نیست. همچنین می توانید از CLI های دیگری مثل Ignite CLI برای ساخت application React Native خود استفاده کنید.

استفاده از یک version خاص

اگر می خواهید پروژه جدیدی را با یک version خاص از React Native بسازید، میتوانید از آرگومان –version استفاده کنید:

react-native init AwesomeProject --version X.XX.X

react-native init AwesomeProject --version react-native@next

&lt;br/&gt; اجرای یک application React Native

از دستور react-native run-ios در پوشه ی مربوط به پروژه تان استفاده کنید:

cd AwesomeProject

react-native run-ios

اپلیکیشن application در شبیه ساز iOS اجرا می شود:

اجرای یک application React Native

دستور react-native run-ios فقط یکی از روش های اجرای برنامه است. می توانید به طور مستقیم از درون Xcode آن را اجرا کنید.

اگر دراین روش با مشکل مواجه شدید صفحه Troubleshooting را ببینید.

اجرای برنامه روی device

دستور بالا به طور پیش فرض برنامه شما را روی شبیه ساز اجرا می کند. اگر می خواهید آن را روی یک device iOS اجرا کنید دستورالعمل های این بخش را دنبال کنید.

تغییر در application

حال که توانستید بدون مشکل application را اجرا کنید، می توانید آن را تغییر دهید.

فایل App.js را در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید.
در شبیه ساز iOS خود ⌘R را بزنید تا application از اول اجرا شود و تغییرات را ببینید.

تمام شد!

تبریک می گویم. شما اولین برنامه React Native خود را اجرا کرده اید!

قدم بعدی؟

از منوی Developer، Live Reload را فعال کنید. اکنون برنامه با هر تغییری در کد، به طور اتوماتیک reload می شود.
اگر می خواهید به یک application موجود، کد React Native اضافه کنید بخش راهنمای ادغام application های موجود با React Native را ببینید.

اگر می خواهید درمورد React Native بیشتر بدانید با ادامه این آموزش همراه باشید.

2. Linux/ Windows و iOS

build کدهای native برای iOS تنها روی Mac ممکن است. می توانید بخش شروع با Expo CLI

را برای build کردن application خود با Expo، دنبال کنید.

دوره آموزش React Native

پایان بخش دوم آموزش React Native

۰ نظر

۰ ۰۴ مهر ۹۸ ، ۱۵:۳۹

افشین رفوا

دوره آموزش react native

آموزش React native

قسمت اول

مقدمه آموزش React Native:

سلام در این جا می خواهیم آموزش React Native را از مبتدی شروع کرده و به امید خدا به پیشرفته برسیم پس با ما همراه باشید.

اصلا React Native چیست : React Native مانند React هست اما به جای Component های مبتنی بر وب از Component های native به عنوان اجزای سازنده Application استفاده می کند. برای فهم ساختار یک React Native Application باید کمی با مفاهیم پایه React مثل JSX , Application , state و props آشنا شوید.

اگر با React آشنا هستید هنوز مواردی مختص React Native هستند که باید یاد بگیرید.در این جا سعی می کنیم طوری آموزش دهیم که برای همه مناسب باشد چه اینکه تجربه کار با React داشته باشید یا نه

شروع کار با React Native

این بخش آموزش React Native به شما کمک می کند اولین Application React Native خود را نصب و build کنید. اگر React Native را قبلا نصب کرده اید، می توانید این بخش را رها کنید و مستقیما از بخش مفاهیم پایه در React Native ( بخش دوم آموزش ) شروع کنید.

اگر پیش زمینه ای از وب دارید، ساده ترین روش شروع کار با React Native ابزارهای Expo است. می توانید بدون نصب و راه اندازی Xcode یا Android Studio پروژه خود را راه اندازی کنید. توسط Expo CLI می توانید یک محیط توسعه روی سیستم خود راه اندازی کنید و در عرض چند دقیقه شروع به توسعه application React Native خود کنید. برای توسعه سریع، میت وانید از Snack برای توسعه و اجرای React Native در مرورگر خود استفاده کنید.

اگر با توسعه ی application به صورت native(جاوا یا swift) آشنا هستید، می توانید از React Native CLI استفاده کنید. برای شروع باید XCode یا Android Studio را نصب داشته باشید.

شروع با Expo CLI:

با این فرض که قبلا Node version 10 به بالا را نصب کرده اید، می توانید از npm برای نصب ابزار خط فرمان Expo CLI استفاده کنید:

npm install -g expo-cli

سپس برای ساخت یک پروژه React Native جدید به اسم AwesomeProject، دستورات زیر را اجرا کنید:

expo init AwesomeProject

cd AwesomeProject

npm start # you can also use: expo start

این کار یک سرور توسعه برای شما راه اندازی می کند.

اجرای یک Application React Native

برنامه مخصوص Client Expo را روی iOS یا android خود نصب کنید و به شبکه wireless مشترک با کامپیوترتان، وصل شوید. روی android، با استفاده از application Expo کد QR را از ترمینال scan کنید تا برنامه تان باز شود. روی iOS، دستورالعمل های روی صفحه را دنبال کنید تا لینک بگیرید.

آموزش React Native

تغییر در Application

حال که توانستید بدون مشکل application را اجرا کنید، می توانید آن را تغییر دهید. فایل App.js را در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید. بعد از ذخیره آخرین تغییرات، application به طور اتوماتیک reload می شود.

تمام شد!

تبریک می گویم. شما اولین برنامه React Native خود را اجرا کرده اید!

قدم بعدی؟

Expo مستندات زیادی دارد که می تواند مرجع خوبی برایتان باشد. بعلاوه می توانید در forum آن سوالات خود را مطرح کنید.

این ابزارها به شما کمک می کنند سریع توسعه را شروع کنید، اما قبل از ادامه کار با Expo CLI، درمورد محدودیت های آن مطالعه کنید.

اگر هنگام کار با Expo به مشکلی برخوردید، قبل از ایجاد یک issue جدید، لطفا issue های موجود را ببینید:

· صفحه ی Expo CLI issues (برای مشکلات مرتبط یا Expo CLI)

· صفحه ی Expo issues (برای مشکلات مربوط به Expo client یا SDK)

اگر می خواهید درمورد React Native بیشتر بدانید با ادامه این آموزش همراه باشید.

اجرای برنامه روی شبیه ساز یا Virtual device

با Expo CLI براحتی می توانید برنامه تان را روی device واقعی بدون راه اندازی هیچ گونه محیط توسعه، اجرا کنید. اگر می خواهید برنامه را روی شبیه ساز iOS یا Virtual device android اجرا کنید، به بخش شروع با React Native CLI مراجعه کنید، برای اینکار باید Xcode یا محیط توسعه لازم برای android را راه اندازی کنید.

پس از راه اندازی پیش نیازها، می توانید با دستور npm run android برنامه را روی Virtual device android اجرا کنید. با دستور npm run ios روی Mac، می توانید برنامه را روی شبیه ساز iOS اجرا کنید.

هشدارها

از آنجا که موقع استفاده از Expo برای ایجاد پروژه از هیچ کد native (برای مثال جاوا) استفاده نمی کنید، نمی توان ماژول های native سفارشی به غیر از آنچه API های React Native فراهم می کند و component های موجود در application Client Expo، استفاده کرد.

اگر می دانید که قرار است نهایتا از کد native استفاده کنید، Expo همچنان گرینه خوبی برای شروع است. در مرحله آخر، می توانید با eject کردن پروژه، Build های Native بسازید. پس از eject کردن پروژه، بخش شروع با React Native CLI برای ادامه کار مرجع شماست.

شروع با React Native CLI:

اگر می خواهید کد native در پروژه تان داشته باشید از این دستور العمل پیروی کنید. برای مثال، اگر می خواهید React Native را در یک application که قبلا ایجاد کرده اید اضافه کنید، یا اگر یک application با Expo یا ابزار Create React Native Appتوسعه داده اید و "eject" کرده اید، به این بخش نیاز دارید.

این دستورالعمل ها به سیستم عامل مورد استفاده برای توسعه وابسته است و اینکه می خواهید برای iOS یا androidبرنامه بنویسید. اگر می خواهید برای هردو پلتفرم iOS و androidتوسعه بدهید، مشکلی نیست، یکی از آن ها را انتخاب کنید، چرا که هرکدام دستورالعمل متفاوتی دارند:

محیط توسعه: Mac، Windows، Linux

محیط اجرای نهایی: android، iOS

1. محیط Linux و android

آموزش React Native

نصب پیش نیازها

برای اینکار به Node، خط فرمان React Native، و JDK و Android Studio نیاز دارید.

می توانید از هر ویرایشگری برای توسعه application خود استفاده کنید، با این حال Android Studio را برای راه اندازی ابزارهای مورد نیاز برای buildکردن application React Native خود برای android لازم خواهید داشت.

نصب Node

دستورالعمل مخصوص Linux را برای نصب Node 8.3 یا بالاتر دنبال کنید.

آموزش پروژه محور React Native

ابزار React Native CLI

نود Node با npm همراه است، که به شما امکان نصب خط فرمان React Native CLI را می دهد.دستورات زیر را در ترمینال اجرا کنید.

npm install -g react-native-cli

اگر به خطایی مثل Cannot find module 'npmlog' برخوردید، npm را مستیم نصب کنید: curl -0 -L https://npmjs.org/install.sh | sudo sh

نصب Java Development Kit

ری اکت React Native به version 8 از (package Java SE Development Kit (JDK احتیاج دارد. می توانید OpenJDK را از AdoptOpenJDK یا هر packager دیگری نصب کنید. می توانید از این لینک JDK را دانلود و نصب کنید.

محیط توسعه android

اگر در ابتدای راه توسعه ی android باشید، راه اندازی محیط توسعه android کار خسته کننده ای است. اگر با توسعه android آشنا هستید، مواردی هست که باید configشوند. درهر دو حالت، لطفا گام های بعدی را با دقت دنبال کنید.

1. نصب Android Studio

نرم افزار Android Studio را دانلود و نصب کنید. گزینه ی “Custom” را موقع انتخاب نوع نصب، انتخاب کنید. تمام موارد زیر باید تیک خورده باشند:

Android SDK

Android SDK Platform

Performance (Intel ® HAXM) (ببینید AMDبرای )

Android Virtual Device

گزینه “Next” را بزنید تا component های بالا نصب شوند.

اگر باکس های موارد بالا غیرفعالند می توانید بعدا component مربوطه را نصب کنید.

2. نصب Android SDK

نرم افزار Android Studio به طور پیش فرض آخرین version SDK را نصب می کند. با این حال، build کردن یک application React Native به همراه کد native، نیاز به Android 9 (Pie) SDKدارد. SDK های دیگر از طریق SDK Manager در Android Studio قابل نصب هستند.

از صفحه ی "Welcome to Android Studio" گزینه ی "Configure" را انتخاب کنید. سپس "SDK Manager" را انتخاب کنید.

Android Studio

منیجر "SDK Manager" را می توان در قسمت "Preferences" در خود Android Studio، از مسیر Appearance & Behavior → System Settings → Android SDK پیدا کرد.

تب "SDK Platforms" را در SDK Managerانتخاب کنید، سپس باکس کنار "Show Package Details" را در گوشه پایین سمت راست انتخاب کنید. Android 9 (Pie) را پیدا کنید، آن را باز کنید و موارد زیر را تیک بزنید:

Android SDK Platform 28
Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

در آخر، دکمه Apply را بزنید تا Android SDK و بقیه ابزارهای build نصب شوند.

3. config ANDROID_HOME environment variable

ابزارهای React Nativeبرای build کردن application با کد nativeنیاز به متغیرهای محیطی (environment variable) دارند.

خطوط زیر را به فایل $HOME/.bash_profile یا $HOME/.bashrc اضافه کنید:

export ANDROID_HOME=$HOME/Android/Sdk

export PATH=$PATH:$ANDROID_HOME/emulator

export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/tools/bin

export PATH=$PATH:$ANDROID_HOME/platform-tools

پروفایل bash_profileمختص bash است. اگر از Shell دیگری استفاده می کنید، فایل تنظیمات مخصوص آن shell را باید تغییر دهید.

مطمئن شوید که از مسیر صحیح Android SDK استفاده می کنید. میتوانید مکان SDK را در Android Studio در بخش "Preferences"، در مسیر Appearance & Behavior → System Settings → Android SDK چک کنید.

آموزش React Native

واچ من Watchman

واچ من Watchman ابزاری است که توسط Facebookتوسعه داده شده و برای مانیتور تغییرات در فایل سیستم به کار می رود. توصیه می شود برای عملکرد بهتر و سازگاری بیشتر از آن استفاده کنید. (ممکن است بدون نصب آن کارتان راه بیوفتد اما نصب آن شما را از مشکلات زیادی در آینده نجات می دهد.)

ساخت یک application

توسط خط فرمان React Native یک پروژه ی React Native جدید به اسم AwesomeProject ایجاد کنید:

react-native init AwesomeProject

اگر می خواهید React Native را در یک application موجود ادغام کنید، یا اگر از Expo (یا Create React Native App) پروژه ای را ejectکرده اید، یا اگر می خواهید پشتیبانی از iOS را به یک پروژه ی React Native اضافه کنید(کد پلتفرم-محور را ببینید)، این کار لازم نیست. همچنین می توانید از CLI های دیگری مثل Ignite CLI برای ساخت application React Native خود استفاده کنید.

استفاده از یک version خاص

اگر می خواهید پروژه جدیدی را با یک version خاص از React Nativeبسازید، می توانید از آرگومان –versionاستفاده کنید:

react-native init AwesomeProject --version X.XX.X

react-native init AwesomeProject --version react-native@next

آماده سازی device android

درهرصورت، باید device را برای اجرای applicationدرهنگام توسعه، آماده کنید.

استفاده از یک device فیزیکی

اگر یک device android واقعی دارید، می توانید به جای AVD از آن هنگام توسعه استفاده کنید. device را با کابل USB به کامپیوتر وصل کنید و دستورالعمل این بخش را دنبال کنید.

استفاده از یک Virtual device

اگر با Android Studioپروژه ی ./AwesomeProject/android را باز کنید، می توانید لیستی از virtual device هایandroid را ببینید از بخش "AVD Manager" ببینید. دنبال آیکنی شبیه عکس زیر بگردید:

AVD Manager

اگر تازه Android Studio را نصب کرده باشید، احتمالا باید یک AVD جدید بسازید. گزینه ی "Create Virtual Device..." را بزنید، سپس یکی از موبایل ها را از لیست انتخاب کنید و روی "Next" کلیک کنید. سپس Image Pie API Level 28 را انتخاب کنید.

توصیه می کنم برای عملکرد بهتر VM acceleration را روی سیستم خود کافیگ کنید. سپس به AVD Manager بازگردید.

روی "Next" و سپس "Finish" کلیک کنید. در این لحظه برای راه اندازی AVDساخته شده، روی دکمه مثلثی سبز کنار AVD تان کلیک کنید . سپس به مرحله بعد بروید.

اجرای یک application React Native

از دستور react-native run-android در پوشه ی مربوط به پروژه تان استفاده کنید:

cd AwesomeProject

react-native run-android

اگر همه چیز درست انجام شده باشد باید application در شبیه ساز android اجرا شود.

اجرای یک application React Native

دستور react-native run-android فقط یکی از راه های اجرای برنامه است. می توانید مستقیما از داخل Android Studio آن را اجرا کنید.

اگر دراین روش با مشکل مواجه شدید صفحه Troubleshooting را ببینید.

تغییر در application

حال که توانستید بدون مشکل application را اجرا کنید، می توانید آن را تغییر دهید.

فایل App.js را در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید.
کلید R را دوبار فشاردهید یا گزینه ی Reload از منوی Developer (Ctrl + M) بزنید تا تغییرات را ببینید.

تمام شد!

تبریک می گویم. شما اولین برنامه React Native خود را اجرا کرده اید!

قدم بعدی؟

از منوی Developer، Live Reload را فعال کنید. اکنون برنامه با هر تغییری در کد، به طور اتوماتیک reload می شود.
اگر می خواهید به یک application موجود کد React Native اضافه کنید بخش راهنمای ادغام application های موجود با React Native را ببینید.

اگر می خواهید درمورد React Nativeبیشتر بدانید با ادامه این آموزش همراه باشید.

آموزش React Native

۰ نظر

۰ ۰۴ مهر ۹۸ ، ۱۵:۳۷

افشین رفوا

آموزش Node.js

دوره آموزش کامل Node.js و ایجادAPI

اهداف دوره

در این دوره می آموزید که چگونه با زبان JavaScript برنامه نویسی سمت Server انجام دهید.
در دوره آموزش Node.Js، دانشجو به صورت کامل کار با پایگاه داده MongoDB را می آموزد.
در دوره آموزش Node.Js، دانشجو به صورت کاربردی نحوه ساخت API در Node.Js را می آموزد.
در دوره آموزش Node.Js، دانشجو به صورت کاربردی بر Socket Programming مسلط می شود.
در دوره آموزش Node.Js، کلیه مراحل ساخت یک چت روم آنلاین را به صورت پروژه محور می آموزید.
دانشجو در دوره آموزش Node.Js، به تسلط کامل بر مفاهیم شی گرایی و پیاده سازی آن در Node.Js مسلط می شود.
در دوره آموزش Node.js، دانشجویان به تسلط کامل بر معماری MVC می رسند.
در دوره آموزش Node.js،دانشجو به تسلط کامل بر Design Pattern Dependeny Injection و همچنین به تسلط بر کار با ابزار IOC در Node.js می رسد. IOC ها ابزارهای مدیریت ساخت اشیا هستند که از یک نقطه مرکزی کل فرآیند ساخت ومیریت حافظه همه اشیا را بر عهده می گیرند.
در دوره آموزش Node.Js، دانشجویان به تسلط کامل بر سیستم احراز هویت در Node.Js می رسند. استفاده از JWT که یکی از بهترین روشهای Token سازی میباشد،میرسند
در دوره آموزش Node.js دانشجویان با تسلط کامل مفاهیم Asymmetric Encryption، وهمچین DIGITALL SIGNATURE اقدام به رمزگذاری Token های امنیتی می پردازند
در دوره آموزش Node.Js، دانشجویان به تسلط کامل بر مفاهیم MiddleWare می رسند و قادر خواهند بود تا MiddleWare ها رادر PIPE Line بارگ

برای ثبت نام در دوره آموزش Node.js به سایت آموزشگاه تحلیل داده رجوع کنید

مخاطبین این دوره

دانشجویانی که با یک زبان برنامه نویسی آشنایی دارند و برنامه نویسان حرفه ای و مبتدی که علاقه مند به یادگیری Node.js هستند.

پیشنیاز

آشنایی با مفاهیم برنامه نویسی

o آموزش مقدمات Node.js

آموزش Package Manager و کار با NPM
آموزش مفاهیم Package و فرمت JSON
نصب و راه اندازی Node.js و Visual Studio Code
مروری بر JavaScript و ES 6
تفاوت های شیوه های برنامه نویسی در سمت Back End

o آموزش مفاهیم کاربردی جاوااسکریپت در Node.js

آموزش ایجاد نخستین پروژه در Node.js
آموزش بررسی ساختار نخستین پروژه Node.js
آموزش ایجاد ساختار های مختلف در پروژه Node.js
آموزش معرفی انواع داده (Data Type) و عملگرها در Node.js
آموزش تعریف انواع توابع در Node.js
آموزش خصوصیات String (Length, Constructor, Prototype) در Node.js
آموزش متدهای کار رشته در Node.js
آموزش انواع شرط ها و حلقه ها در Node.js
آموزش کار با کلاس ها در Node.js
آموزش کار با آرایه ها و متدهای مربوط به آن در Node.js
آموزش آشنایی و کار با Callback و برنامه نویسی Sync و Async در Node.js
آموزش درک معماری های SCA و N-Layer و بررسی آنها در Node.js

o آموزش کار با Database در Node.js

تعریف Database
انواع Database و تفاوت های بین SQL و NOSQL
آموزش نصب و راه اندازی MongoDB
آموزش انواع داده ها در MongoDB
آموزش مفاهیم Scope و Variables در Node.js
آموزش عملگرها در Node.js
آموزش مفاهیم اشیا، آرایه ها و تابع ها در Node.js
آموزش Anonymous function در Node.js
آموزش Module System در Node.js
آموزش طرز کارکرد MongoDB
آموزش انجام چهار عمل اصلی در MongoDB (Insert, Update, Delete, Query)

o آموزش Express.js

آموزش طراحی یک وب اپلیکیشن در Node.js
آموزش سازماندهی فایل ها در Node.js
آموزش ایجاد Entry Point در Node.js
آموزش درک و استفاده از Middleware در Node.js
آموزش Router در Node.js
آموزش Controller در Node.js
آموزش Model در Node.js
آموزش Handlebars as view engines در Node.js

o آموزش Templating with Handlebars در Node.js

آموزش Client-side templating در Node.js
آموزش Server-side templating در Node.js
آموزش View ها در Node.js
آموزش Layout ها در Node.js
آموزش Partial View ها در Node.js
آموزش Handlebars در Node.js
آموزش عملیات Binding اشیا به template در Node.js
آموزش Handlebars helper در Node.js
آموزش عملیات Render کردن View ها در Node.js

o آموزش Controllers and View Models در Node.js

آموزش Controllers در Node.js
آموزش View Models در Node.js
آموزش Helpers for reusable code در Node.js

o آموزش Persisting Data with MongoDB در Node.js

آموزش اتصال به MongoDB در Node.js
آموزش ثبت و بازیابی یک document در Node.js
معرفی Mongoose در Node.js
آموزش Schemas در Node.js
آموزش Models در Node.js
آموزش Built-in validation در Node.js
آموزش Static methods در Node.js
آموزش Virtual properties در Node.js
آموزش اتصال با Mongoose در Node.js
آموزش انجام عملیات CRUD در Node.js

o آموزش ایجاد RESTful API در Node.js

معنا و مفهوم RESTful API چیست؟
آموزش Postman
آموزش ساخت یک API server در Node.js
آموزش انواع متدهای GET و POST و PUT و DELETE

o آموزش Socket در Node.js

تعریف مفهوم سوکت و برنامه نویسی سوکت
آموزش Event Handling در Node.js
آموزش Broadcasting در Node.js
آموزش Namespaces در Node.js
آموزش Rooms در Node.js
آموزش Error Handling در Node.js
آموزش Logging and Debugging در Node.js
آموزش Internals در Node.js
آموزش Chat Application در Node.js

o آموزش Test در Node.js

تست چیست و چرا باید از تست استفاده کنیم؟
آموزش ایجاد Test helper در Node.js
آموزش تست Route در Node.js
آموزش تست Server در Node.js
آموزش تست یک Model در Node.js
آموزش تست یک Controller در Node.js

o آموزش Deploy در Node.js

آموزش گرفتن خروجی از پروژه و انتشار آن در Node.js

o آموزش SPA

معرفی ساختار SPA
معرفی چند Framework برای Frontend

o آموزش Node.js Framework

۰ نظر

۰ ۱۳ مرداد ۹۸ ، ۱۸:۲۷

افشین رفوا

آموزش React native

آموزش React Native

مقدمه

در دوره می آموزید که چگونه Application های Cross Platform بسازید که در سیستم عامل های Android و IOS اجرا شوند.
در دوره برنامه نویسی React Native می آموزید برنامه هایی بسازید که از لحاظ خروجی و Peformance دقیقا Native بوده و برنامه تولید شده دقیقا مانند برنامه ای است که با Java یا Swift ساخته شده است.
نرم افزارهای مشهور Instagram، Facebook، Skype و... نمونه هایی از Application هایی هستند که با React Native ساخته شده اند.

اهداف دوره

دانشجویان در دوره React Native بر معماری سیستم عامل Android تسلط کافی می یابند.
دانشجویان در دوره React Native بر معماری سیستم عامل IOS تسلط کافی می یابند.
در دوره آموزش React Native دانشجویان به تسلط کامل در نصب محیط و راه اندازی محیط برنامه نویسی و همچنین راه اندازی Emulator مسلط می شوند.
در دوره آموزش React Native دانشجویان به جنبه های قدرتمند زبان برنامه نویسی JavaScript که در برنامه نویسی React Native استفاده می شود مسلط می شوند.
آموزش ساخت انواع Layout و استانداردهای Layout در Android و IOS از اهداف این دوره می باشد.
دانشجویان در دوره آموزش React Native به کار با State ها و همچنین Debug نمودن برنامه های React Native مسلط می شوند.
طراحی انواع Navigation های موبایل شامل Android و IOS و همچنین ساخت انواع Animation از اهداف دوره آموزش React Native می باشد.
آموزش کار با دستگاه های جانبی موبایل مثل دوربین، نقشه و... از اهداف دوره می باشد.
دانشجویان در دوره آموزش React Native می آموزند که با استفاده از Http Request چگونه انواع API ها و Web Service ها و دیگر منابع Web را مورد دسترسی قرار دهند.

برای ثبت نام در دوره آموزش React Native به سایت آموزشگاه تحلیل داده رجوع کنید

مخاطبین این دوره

شرکت ها و برنامه نویسان فعال در حوزه نرم افزار که می خواهند هزینه تولید اپلیکیشن های خود را کاهش دهند.
تمامی برنامه نویسان حرفه ای Andoird و IOS که می خواهند به دنیای جدیدی از طراحی اپلیکیشن وارد شوند.
طراحانی که می خواهند بدون درگیر شدن با Android و IOS اپلیکشن بسازند.
کلیه برنامه نویسان Web و Desktop که می خواهند بدون یادگیری Java و Swift تخصص اپلیکیشن نویسی را به گنجینه دانسته های خود بیفزایند.

پیشنیاز

آشنایی با HTML و CSS و مفاهیم برنامه نویسی

o مقدمات

معرفی سیستم عامل و پلتفرم ها
انواع برنامه نویسی به صورت Cross Platform
آینده وب و موبایل
مروری بر HTML و CSS
آموزش حرفه ای Package Manager برای React Natvie
آموزش Package.json
مزایا و معایب React Native

o آموزش نصب و راه اندازی محیط React Native

آموزش نصب NodeJS
آموزش نصب Android Studio
آموزش نصب Visual Studio Code
آموزش نصب React Native
آموزش نصب React Native CLI
آموزش کاربردی Extension های Vysor، Web Server، Audits و...
کار Developer Options در موبایل
معرفی و نصب شبیه ساز

o آموزش جاوااسکریپت برای React Native

آموزش کاربردی EcmaScript 6
آموزش کاربردی Arrow Functions
آموزش کار با کلاس ها (Classes) در جاوااسکریپت
آموزش Enhanced Object Literals در جاوااسکریپت
آموزش String interpolation در جاوااسکریپت
آموزش Destructuring در جاوااسکریپت
آموزش Default در جاوااسکریپت
آموزش Spread در جاوااسکریپت
آموزش Spread + Object Literals در جاوااسکریپت
آموزش Rest در جاوااسکریپت
آموزش Let در جاوااسکریپت
آموزش Const در جاوااسکریپت
آموزش For..of در جاوااسکریپت
آموزش Unicode در جاوااسکریپت
آموزش Modules And Module Loaders در جاوااسکریپت
آموزش Set در جاوااسکریپت
آموزش WeakSet در جاوااسکریپت
آموزش Map در جاوااسکریپت
آموزش WeakMap در جاوااسکریپت
آموزش Proxies در جاوااسکریپت
آموزش Symbols در جاوااسکریپت
آموزش Inheritable Built-ins در جاوااسکریپت
آموزش New Library در جاوااسکریپت
آموزش Binary and Octal در جاوااسکریپت
آموزش Promises در جاوااسکریپت
آموزش Reflect در جاوااسکریپت
آموزش Tail Call Optimization در جاوااسکریپت

o آموزش ساختار محیط Android Studio و سیستم عامل Android

آشنایی با محیط Android Studio
آموزش Folder Structure در Android Studio
آشنایی با Java و XML
آشنایی با مدل لایه ای معماری Android
آشنایی با اصطلاحات Android
بررسی کامل و جامع Activity
بررسی Fragment در اندروید
بررسی Widget در اندروید
بررسی Layout در اندروید
آموزش جامع Manifest

o آموزش ساختار محیط XCode و سیستم عامل IOS

مقدمات IOS
آشنایی با Swift
آشنایی با اصطلاحات IOS
بررسی Stackview در IOS
بررسی Auto Layouts در IOS
بررسی Segues در IOS
بررسی Package در IOS

o آموزش React Native

ایجاد اولین پروژه React Native
آموزش خروجی گرفتن از پروژه React Native
آموزش اجرای برنامه React Native در Android
آموزش اجرای برنامه React Native در IOS
آموزش کار با ورودی متنی (Textinput) در React Native
آموزش استایل دهی در React Native
آموزش استفاده از یک Framework اختصاصی در React Native
آموزش Position در React Native
آموزش (Button) در React Native
آموزش ساخت کامپوننت های اختصاصی در React Native
آموزش Listening to Touch Events در React Native
آموزش ScrollView در React Native
آموزش Static Images در React Native
آموزش Network Images در React Native
آموزش Modal در React Native

o آموزش Managing Application State در React Native

آموزش State
آموزش Redux در React Native
آموزش نصب Redux در React Native
آموزش Actions در React Native
آموزش Reducer در React Native
آموزش Store در React Native
آموزش React Native و Redux در React Native

o آموزش رفع Bug در React Native

آموزش Console
آموزش Console در React Native
آموزش Breakpoints در React Native
آموزش React Native Debugger در React Native
آموزش Debugging Redux در React Native

o آموزش Navigation در React Native

مقایسه Navigation در برنامه های Web و برنامه های Native
آموزش Exploring Native Navigation Solutions در React Native
آموزش افزودن React Native Navigation به Android
آموزش افزودن React Native Navigation به IOS
آموزش Tabs Navigation در React Native
آموزش Icons در React Native
آموزش Pushing Pages در React Native
آموزش Popping Pages در React Native
آموزش Navigator Methods در React Native
آموزش Side Drawer در React Native
آموزش Navigation Events And Toggling the Drawer در React Native

o آموزش طراحی ظاهر برنامه و انیمیشن در React Native

آموزش Stylesheet در React Native
آموزش کامل و حرفه ای Flexbox در React Native
آموزش انواع واحد ها
آموزش Relative
آموزش Absolute
آموزش Text Style در React Native
آموزش Background Image در React Native
آموزش کامل Custom Button در React Native
آموزش کامل Side Drawer در React Native
آموزش Custom Button در React Native
آموزش Cross Platform Styles And Responsiveness در React Native
نمایش Icon های مختلف برای Platform های مختلف در React Native
آموزش بحث Centering with Margins در React Native
استفاده از Animated API در React Native

o آموزش ورودی های کاربر و اعتبارسنجی در React Native

آموزش Validation در React Native
آموزش Managing Input/ Control State در React Native
آموزش Validation Logic در React Native
آموزش Validation State در React Native
آموزش Auth Action در React Native
آموزش Soft Keyboard در React Native

o آموزش کار با قابلیت های دستگاه مانند دوربین و... در React Native

آموزش نصب react-native-maps در React Native
آموزش عملیات Render نقشه در React Native
آموزش انتخاب یک موقیعت روی نقشه در React Native
آموزش افزودن یک Map Marker در React Native
آموزش نصب react-native-image-picker در React Native
آموزش کار با Image Picker در React Native
آموزش Storing the Picked Images در React Native
آموزش Image Picker and the Data it Returns در React Native

o آموزش شبکه و Http Request در React Native

بررسی تئوری Http Request در React Native
آموزش ایجاد Server در React Native
آموزش استفاده از Fetch-API در React Native
آموزش کار با Storing Data in Firebase در React Native
آموزش کار با Image Upload در React Native
آموزش Storing Data in Firebase در React Native
آموزش Storing the Remaining Data در React Native
آموزش Activity Indicator در React Native
آموزش Getting Data from the Server در React Native
برای ثبت نام در دوره آموزش React Native به سایت آموزشگاه تحلیل داده رجوع کنید

۰ نظر

۰ ۱۳ مرداد ۹۸ ، ۱۸:۱۵

افشین رفوا

آموزشگاه برنامه نویسی

آموزشگاه برنامه نویسی تحلیل داده برگزار می کند: آموزش کامل و حرفه ای طراحی سایت
فهرست مخاطبین دوره آموزش کامل و حرفه ای طراحی سایت:
آن دسته از افرادی که می خواهند طراحی سایت را در محیطی 100 % عملی و کاملا پروژه ای یاد بگیرند.

برای ثبت نام و اطلاع از این دوره و سرفصلهای آموزشی آن با شماره های 02188146323 . 02188146330 تماس بگیرید.

سایت آموزشگاه تحلیل داده : http://www.tahlildadeh.com

۱ نظر

۰ ۱۳ مرداد ۹۸ ، ۱۷:۳۶

افشین رفوا

جدیدترین مطالب مطالب جدید تر

آموزش برنامه نویسی

آموزشگاه تحلیل داده ارایه دهنده به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی است که در این زمینه بی رقیب است

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

آموزش طراحی سایت

آموزش #C

آموزش جاوا

آموزش طراحی سایت

دوره آموزش طراحی سایت

آموزش برنامه نویسی

آموزش طراحی وب

آموزش بوت استرپ

آموزش html 5

دوره آموزش BootStrap 4

دانلود آموزش bootstrap 4

آموزش bootstrap 4

آموزش طراحی سایت فرادرس

کتاب آموزش بوت استرپ

آموزش سی شارپ

آموزش C#

آموزش React Native

فیلم آموزش بوت استرپ

فیلم آموزش bootstrap 4

آموزش طراحی سایت حرفه ای

آموزش #C

آموزش html

دوره آموزش react native

آموزش پروژه محور react native

فیلم آموزش جاوا

دوره آموزش جاوا

آموزش جاوا pdf

آموزش java

فیلم آموزش جاوا اسکریپت

آموزش جاوا اسکریپت

دوره آموزش c#

آموزش سی شارپ پروژه محور

آموزش react native فارسی

آموزش Html5

ویژگی های <audio>

چگونه؟

نکات

ویژگی های ویدئو

آموزش نحوه اعمال ویدیو در صفحات وب

توضیح کد:

آموزشHtml 5

چرا HTML5 مهم است؟

آموزش React native - قسمت پنجم

دوره آموزش React Native - بخش چهارم

آموزش پروژه محور React Native

دوره آموزش react native

محیط اجرا : android، iOS

محیط اجرا : Mac و iOS:

آموزش React native

قسمت اول

مقدمه آموزش React Native:

1. محیط Linux و android

دوره آموزش کامل Node.js و ایجادAPI

اهداف دوره

برای ثبت نام در دوره آموزش Node.js به سایت آموزشگاه تحلیل داده رجوع کنید

مقدمه

اهداف دوره

برای ثبت نام در دوره آموزش React Native به سایت آموزشگاه تحلیل داده رجوع کنید