۹ مطلب در مهر ۱۳۹۸ ثبت شده است

آموزش #C

سلام با قسمت دوم آموزش برنامه نویسی سی شارپ #C در خدمتتون هستیم:

انواع داده ای یا Data Types در تمامی قسمت های یک زبان برنامه نویسی مثل C# استفاده می شود. به دلیل این که زبان C#، یک زبان قدرتمند داده ای است، بایستی هر زمان که یک متغیر را تعریف و استفاده می کنید، به کامپایلر اطلاع دهید آن متغیر از چه نوع داده ای است. به نحوه و تعیین نوع داده ای یک متغیر به طور کامل در بخش متغیرها (Variable) خواهیم پرداخت. در این درس به طور کلی به بررسی انواع داده ای مهم زبان C# و نحوه کارکرد آن ها می پردازیم.

آموزش سی شارپ

نوع داده ای bool ساده ترین Data Type زبان C# است. این نوع داده ای که به نوع درست یا غلط نیز معروف است، فقط دو نوع مقدار می تواند داشته باشد، true یا false. متغیر bool در هنگام استفاده از عملگرهای منطقی و یا دستورات شرطی مثل if بسیار کاربرد دارد.
انواع داده ای int نیز که مخفف کلمه integer است، برای نگهداری اعداد بدون بخش اعشاری آن ها به کار می رود. نوع داده ای int پرکاربردترین متغیر در هنگام کار با اعداد در C# است. متغیرهای integer، بر حسب اندازه عددی که می توانند نگهداری کنند، دارای انواع مختلفی در زبان C# می باشند.
نوع داده ای String نیز برای نگهداری متن یا text به کار می رود که عبارت است از تعدادی کاراکتر پشت سر هم. در C#، متغیرهای String از نوع immutable یا تغییرناپذیر هستند، به این معنی که متغیرهای String، پس از تعریف و مقداردهی هرگز تغییر نمی کنند. هنگام کار با متدهایی که یک متغیر String را دستکاری و تغییر می دهند، متغیر String اول تغییر نمی کند، بلکه یک متغیر جدید با مقدار جدید ایجاد می شود.
متغیر char نیز برای نگهداری یک کاراکتر تنها به کار می رود.

راهنمایی :

متغیر float نیز برای نگهداری اعداد اعشاری استفاده می شود.

آموزش #C

آموزش تعریف و مقداردهی متغیرها Variable در C#

یک متغیر یا Variable بخشی از حافظه سیستم است که همانند یک اتاق برای نگهداری اطلاعات خاصی به کار می رود. متغیرها اساس کار برنامه های C# بوده و به صورت زیر، قابل تعریف هستند :

< data type > < name > ;

به عنوان مثال در کد زیر یک متغیر از نوع String به نام name را تعریف کرده ایم :

String name;

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

< visibility > < data type > < name > = < value > ;

در نمونه فوق < visibility > میدان دید متغیر را تعیین می کند. یعنی می گویند چه توابع، کلاس ها و یا متغیرهای دیگری در سطح برنامه می توانند این متغیر را ببینند، فراخوانی و دستکاری کنند. نیز که مقدار اولیه متغیر را مشخص می کند. کد زیر یک مثال را برای تعریف کامل متغیر در C# نشان می دهد :

Private String name = “ Tahlil Dadeh ” ;

در کد مثال زیر، نحوه تعریف، مقداردهی و کار با چند متغیر در زبان C# را در عمل نشان داده ایم :

using System;

namespace ConsoleApplication1

{

class Program

{

static void Main(string[] args)

{

string firstName = "John";

string lastName = "Doe";

Console.WriteLine("Name: " + firstName + " " + lastName);

Console.WriteLine("Please enter a new first name:");

firstName = Console.ReadLine();

Console.WriteLine("New name: " + firstName + " " + lastName);

Console.ReadLine();

}

بسیار خب، بخش زیادی از کد مثال فوق را قبلا توضیح داده ایم، بنابراین در این مرحله مستقیم به سراغ بخش مورد نظرمان می رویم.
اول از همه، ما چندین متغیر از نوع String Type را تعریف کرده ایم. یک String می تواند شامل متن یا Text باشد و همانطور که در کد مثال می بینید، هر متغیر String را بلافاصله مقدار دهی کرده ایم. سپس یک خط متن را به وسیله دو متغیر بر روی خروجی Consale نشان داده ایم. از کاراکتر (+) برای چسباندن متن دو متغیر String و نمایش آن ها به صورت یک جمله استفاده شده است.
در مرحله بعدی، از کاربر خواسته ایم تا یک مقدار جدید را برای متغیر firstName وارد کند. برای این منظور از دستور ReadLine() استفاده شده که یک مقدار ورودی را از کاربر دریافت کرده و درون متغیر firstName قرار می دهد. پس از این که کاربر نام مورد نظر خود را وارد کند، مقدار جدید در متغیر firstName وارد شده و سپس مجددا به وسیله دستور Consale.WriteLine()، جمله را با نام جدید به کاربر نشان داده ایم.
در کد فوق ما فقط از یک متغیر استفاده کرده ایم و این کد به خوبی مهم ترین قابلیت یک متغیر یعنی تغییر در هنگام اجرای برنامه (Run Time) را نشان می دهد.
مثال بعدی برای نشان دادن کار متغیرها، انجام عملیات ریاضی است. کد زیر نحوه انجام کار را نشان می دهد :

int number1, number2;

Console.WriteLine("Please enter a number:");

number1 = int.Parse(Console.ReadLine());

Console.WriteLine("Thank you. One more:");

number2 = int.Parse(Console.ReadLine());

Console.WriteLine("Adding the two numbers: " + (number1 + number2));

Console.ReadLine();

کد فوق را در تابع Main مثال قبل قرار داده و برنامه را مجددا اجرا کنید. تنها حقه به کار رفته در مثال دوم، استفاده از متد int.Parse() است. این متد یک مقدار متنی String را خوانده و آن را به یک متغیر عددی integer تبدیل می کند.
همانطور که مشاهده می کنید، در کد مثال دوم برنامه هیچ تلاشی برای اعتبارسنجی (validate) مقدار ورودی کاربر انجام نداده و اگر کاربر یک مقدار رشته ای (متن) را وارد کرده و دکمه Enter را بزند، برنامه با اشکال رو به رو خواهد شد، زیرا عمل ریاضی را بر روی متن نمی تواند انجام دهد. برای حل این مشکل در درس های بعد بیشتر توضیح می دهیم.

دوره آموزش C#

آموزش ساختار شرطی if در C#

یکی از مهم ترین ساختارهای دستوری در هر زبان برنامه نویسی از جمله C#، دستور if است. توانایی ساخت دستورات شرطی کلی از مهم ترین کارهایی است که بایستی بتوان با زبان ها ی برنامه نویسی انجام داد. در C#، ساختار شرطی if بسیار ساده و کاربردی است. اگر از ساختار دستوری شرطی if در هر زبان برنامه نویسی دیگری استفاده کرده باشید، به راحتی می توانید در C# نیز از آن بهره بگیرید. ساختار دستور شرطی if نیاز مند یک مقدار boolean است که یا true است یا false. در برخی از زبان های برنامه نویسی، چندین نوع داده ای را می توان به صورت اتوماتیک به Boolean تبدیل کرد، اما در C# باید مستقیما از نوع داده ای Boolean استفاده کنید. برای مثال نمی توانید از نوع داده ای عددی int به صورت مستقیم استفاده کنید، اما می توانید آن را با یک مقدار دیگر قیاس کرده و مقدار true یا false نتیجه را مورد استفاده قرار دهید.
در درس قبلی، به آموزش نحوه تعریف و استفاده از متغیرها (Variables) در زبان C# پرداختیم. در این درس هم به آموزش نحوه کار با دستورات شرطی در C# می پردازیم. برای این منظور کد مثال زیر را با دقت مطالعه کنید :

using System;

namespace ConsoleApplication1

{

class Program

{

static void Main(string[] args)

{

int number;

Console.WriteLine("Please enter a number between 0 and 10:");

number = int.Parse(Console.ReadLine());

if(number > 10)

Console.WriteLine("Hey! The number should be 10 or less!");

else

if(number < 0)

Console.WriteLine("Hey! The number should be 0 or more!");

else

Console.WriteLine("Good job!");

Console.ReadLine();

}

در کد مثال فوق از دو دستور شرطی if استفاده کرده ایم تا چک کنیم آیا عدد ورودی توسط کاربر، بین 0 تا 10 است یا خیر. به همراه دستور if از کلید واژه else نیز استفاده شده است. قسمت کد else زمانی اجرا می شود که شرط بخش if درست نباشد.
اگر در کد مثال فوق دقت کرده باشید، ما از کاراکترهای {} برای دسته بندی دستورات if و else ها استفاده نکرده ایم.. این یک قانون در C# است. اگر کد نوشته شده فقط در حد یک متن خطی باشد، نیازی به استفاده از {} برای دسته بندی کدها نیست.
حجم کد نوشته شده برای مقایسه مقدار یک عدد در مثال فوق کمی زیاد به نظر می رسد. همان کد را می توانید به صورت زیر، خلاصه تر بنویسید :

if((number > 10) || (number < 0))

Console.WriteLine("Hey! The number should be 0 or more and 10 or less!");

else

Console.WriteLine("Good job!");

ما هر یک از دستورات شرطی را درون یک پرانتز قرار داده و سپس از عملگر ǁ که به معنلی "یا"، "or" می باشد، استفاده کرده ایم تا چک کنیم عدد واردشده از 10 بزرگتر یا کوچکتر از 0 است. عملگر دیگری که در این گونه موارد نیز می توانید استفاده کنید عملگر AND به معنای "و" است که به صورت && نوشته می شود. آیا می توانیم در کد مثال دوم از عملگر AND به جای or استفاده کنیم؟. بله، فقط کافی است کد را به صورت زیر بازنویسی کنیم :

if((number <= 10) && (number >= 0))

Console.WriteLine("Good job!");

else

Console.WriteLine("Hey! The number should be 0 or more and 10 or less!");

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

آموزش کار با دستور Switch در C#

دستور Switch همانند مجموعه ای از دستورات پشت سر هم if عمل می کند. دستور Switch درواقع لیستی از حالت های ممکن است که برای هر حالت یک دستور یا کدی جهت اجرا پیش بینی شده است. این دستور همچنین یک حالت default یا پیش فرضی دارد که در صورتی که هیچ یک از حالات آن true نباشد، اجرا خواهد شد.
یک دستور ساده Switch ساختاری هماند کد مثال زیر دارد :

int number = 1; switch(number) { case 0: Console.WriteLine("The number is zero!"); break; case 1: Console.WriteLine("The number is one!"); break; }

مقدار شناسه یا identifier (مقدار متغیری که می خواهیم دستور Switch بر حسب آن عمل کند) را پس از واژه کلیدی Switch قرار می دهیم. سپس لیستی از انواع حالت های مختلف برای آن مقدار توسط هر دستور case مشخص شده و مقدار شناسه با مقدار هر case مقایسه می شود. اگر مقدار شناسه با مقدار هر کدام برابر نبود، دستورات بخش پیش فرض default اجرا می شود.
اگر دقت کرده باشید، در پایان هر case یک دستور break قرار داده شده است. برای چیست؟ اگر مقدار یک case با مقدار شناسه دستور Switch برابر شود، دستورات آن case اجرا شده و اگر در انتهای case دستور break وجود نداشته باشد، دستورات case های بعدی نیز اجرا خواهد شد. به عبارت دیگر، دستور break ، باعث توقف روند اجرای دستورات Switch شده و برنامه به خط کد بعد از Switch می فرستد. در نوشتن break دقت لازم به عمل آورید، ؟؟؟؟؟ نوشتن آن می تواند کلا برنامه را دچار اختلال کنید.
هنگامی که هم یک تابع را در دستورات یک case تعیین می کنید، می توانید با استفاده از return خروجی تابع را به عنوان خروجی Switch برگردانید.
در کد مثال، ما از یک متغیر عددی integer به عنوان شناسه دستور Switch استفاده کرده ایم، اما این شناسه می تواند از نوع متنی String و یا هر نوع داده ای دیگر زبان C# باشد.
در مثال زیر، ابتدا یک مقدار را به عنوان ورودی از کار برگررفته ایم، سپس آن را به عنوان یک متغیر متنی String به دستور Switch ارسال نموده ایم. در کد مثال زیر، برای هر دو مقدار “yes” و “Maybe” یک دستور مشترک را تعیین کرده ایم.

Console.WriteLine("Do you enjoy C# ? (yes/no/maybe)");

string input = Console.ReadLine();

switch(input.ToLower())

{

case "yes":

case "maybe":

Console.WriteLine("Great!");

break;

case "no":

Console.WriteLine("Too bad!");

break;

}

در کد مثال فوق، سوالی از کاربر پرسیده شده و از وی خواسته شد یکی از مقادیر “yes”، “no” و “maybe” را وارد نماید. سپس مقدار وارد شده از ورودی توسط دستور Consale.ReadLine() خوانده شده و یک دستور Switch بر مبنای آن طراحی شده است. برای سهولت کار کاربر، توسط دستور ToLower() ، کاراکترهای ورودی کاربر را به حروف کوچک تبدیل کرده ایم تا در هنگام مقایسه با مقادیر Case ها، فرقی بین مقدار وارد شده برای حروف بزرگ و کوچک وجود نداشته باشد. اما بدون وجود دستور default در Switch، اگر کاربر در مثال فوق مقداری غیر از مقادیر تعیین شده برای case ها وارد نماید، برنامه هیچ خروجی نخواهد داشت. بنابراین کد مثال فوق را به همراه default به صورت زیر بازنویسی می کنیم :

Console.WriteLine("Do you enjoy C# ? (yes/no/maybe)");

string input = Console.ReadLine();

switch(input.ToLower())

{

case "yes":

case "maybe":

Console.WriteLine("Great!");

break;

case "no":

Console.WriteLine("Too bad!");

break;

default:

Console.WriteLine("I'm sorry, I don't understand that!");

break;

}

اگر کاربر مقداری به غیر از مقادیر تعیین شده برای case ها وارد نماید، بخش default به صورت پیش فرض اجرا خواهد شد.

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

۰ نظر

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

افشین رفوا

آموزش سی شارپ - آموزش #C

آموزش سی شارپ-

آموزش #C

معرفی آموزش زبان C#

آموزش سی شارپ

به بخش جدید آموزش C# خوش آمدید. همزمان با معرفی چهارچوب کلری .NET ، مایکروسافت یک زبان برنامه نویسی جدید به نام C# که در اصطلاح سی شارپ خوانده می شود را به آن اضافه کرد.

سی شارپ طراحی شد تا نقش یک زبان برنامه نویسی ساده، مدرن، چند منظوره و شی گرا را برای چهارچوب کاری .NET ایفا کند. از طرف دیگر، C# مفهوم های کلیدی و قابلیت های خوب سایر زبان های برنامه نویسی به ویژه جاوا را قرض کرده و درون خود دارد.

از لحاظ نظری، C# می تواند تا سطح کد ماشین یا اسمبلی کامپایل شود، اما در کارکرد واقعی، همیشه به همراه چهارچوب کاری .NET استفاده می شود. بنابراین در برنامه ای که با زبان C# نوشته شده باشد، برای اجرا بر روی کامپیوتر، نیازمند نصب چهارچوب کاری .NET می باشد. با وجود این که چهارچوب کاری .NET امکان استفاده از طیف وسیعی از زبان های برنامه نویسی را بر روی ویندوز به ما می دهد، اما گاهی اوقات آموزش C# به عنوان زبان اصلی .NET معرفی شده است. البته شاید این به دلیل طراحی همزمان با چهارچوب کاری .NET باشد.

راهنمایی برای دوره آموزش C# :

سی شارپ یک زبان برنامه نویسی شی گرا یا Oriented بوده و در آن امکان استفاده از متغیرها یا تابع سراسری یا Globol وجود ندارد. در C#، همه چیز در کلاس ها (classes) قرار می گیرند، حتی ساده ترین انواع داده ای مثل int یا String که از کلاس System.object مشتق شده اند.

آموزش #C

معرفی ابزار و آموزش کار با Visual C# Express:

دستورات زبان C# را می توانید با هر نوع ادیتور متنی مثل Windows Notepad نوشته و سپس به وسیله برنامه CSC.exe که کامپایلر خطی دستورات C# بوده و همراه با چهارچوب کاری .NET بر روی سیستم نصب می شود، کامپایل و اجرا نمایید.

اما اکثر افراد ترجیح می دهند از یک IDE یا محیط توسعه یکپارچه (Integrated Development Envirment) استفاده کنند که مایکروسافت چندین برنامه را برای این منظور ارائه داده است. گل سرسبد این برنامه ها، Visual Studio است که قابلیت اجرای تمامی امکانات چهارچوب کاری .NET را دارا می باشد. این برنامه بسیار پیشرفته بوده و در نسخه های مختلفی ارائه شده است.

همزمان با ارائه نسخه 2 چهار چوب کاری .NET، مایکروسافت نسخه ای از ویژوال استودیو را به نام Express منتشر کرد که برای استفاده برنامه نویسان معمولی و کسانی که می خواهند چهارچوب کاری .NET را فرا بگیرند، مناسب است. نسخه Express فقط برای برنامه نویسی به زبان های C# و VB.NET طراحی شده و برخی از قابلیت های مهم و کاربردی ویژوال استودیو را شامل نمی شود. اما به هر حال ابزار رایگانی بوده و برای افراد تازه کار و معمولی بسیار مناسب است.

راهنمایی :

برای برنامه نویسی به زبان C#، بایستی برنامه ویژوال C# اکسپرس را از آدرس https://visualstudio.microsoft.com/vs/express/ دانلود نموده و بر روی سیستم خود نصب نمایید. سپس آماده کد نویسی C# خواهید بود.

آموزش ساخت اولین برنامه C# با Hello word

اگر شما قبلا نیز اقدام به یادگیری یک زبان برنامه نویسی کرده باشید، حتما می دانید که اینگونه آموزش ها معمولا با یک برنامه ساده به نام “Hello word” شروع می شوند.

در این آموزش c# هم قصد داریم از این سنت قدیمی استفاده کنیم. برای این منظور برنامه Visual C# Express را اجرا کرده و مسیر منوی File - > New Project را طی کرده و گزینه Consule application را انتخاب نمایید. این ساده ترین نوع برنامه بر روی سیستم ویندوز است، اما نگران نباشید، ما خیلی اینجا نخواهیم ماند. پس از این که بر روی دکمه ok کلیک نمایید، برنامه Visual C# Express یک پروژه جدید را برای شما ایجاد می کند که حاوی یک فایل به نام Program.cs است.

این کار سرآغاز جایی است که هیجان کار شروع شده و کد آن بایستی به صورت زیر باشد :

using System;

using System.Collections.Generic;

using System.Text;

namespace ConsoleApplication1

{

class Program

{

static void Main(string[] args)

{

}

درواقع، مجموعه کدهای فوق هیچ کار خاصی را انجام نمی دهند، یا حداقل اینگونه به نظر می رسند.سعی کنید با زدن دکمه F5 برنامه را بر روی سیستم خود اجرا نمایید. این کار باعث می شود تا Visual C# Express برنامه شامل را کامپایل کرده و اجرا نماید. اما همانگونه که مشاهده می کنید، این کدها کار خاصی را انجام نداده و فقط یک پنجره مشکی رنگ ویندوز باز شده و سپس بسته می شود. این مسئله به این دلیل است که برنامه شما دارای کد خاصی نبوده و کار خاصی را انجام نمی دهد. در بخش بعدی، به بررسی این خطوط کدها به طور کامل خواهیم پرداخت اما الان قصد داریم تا از برنامه خود یک خروجی بگیریم. برای این منظور دو خط کد زیر را درون آخرین مجموعه {} کد برنامه قرار دهید.

;Console.WriteLine("Hello, world!")

;()Console.ReadLine

سپس کد کامل برنامه بایستی به صورت زیر تغییر کند :

;using System

;using System.Collections.Generic

;using System.Text

namespace ConsoleApplication1

{

class Program

{

static void Main(string[] args)

{

; Console.WriteLine("Hello, world!")

;()Console.ReadLine

}

یک بار دیگر، جهت اجرای برنامه دکمه F5 را فشار دهید، این بار مشاهده خواهید کرد که پنجره سیاه برنامه باز شده و علاوه بر این که بلافاصله بسته نمی شود، بلکه یک پیام سلام “Hello word” را نیز به کاربر نشان می دهد. خب، ما دو خط کد به برنامه اضافه کردیم. اما این کدها در واقع چه کاری انجام می دهند؟

خط اول از کلاس Consale برای نمایش یک خط متن در خروجی استفاده کرده و خط دوم هم می تواند یک مقدار ورودی یا متن را از کاربر بخواند. اما چرا خواندن یا Read؟

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

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

به شما تبریک می گوییم، اولین برنامه C# خود را ساخته و اجرا کردید. در بخش بعدی به تشریح کدهای نوشته شده و عملیات صورت گرفته خواهیم پرداخت.

آموزش C#

توضیح و آموزش ساخت برنامه Hello World در C#

در بخش قبل، در اولین برنامه C# ای که طراحی کردیم، یک نوشته را در خروجی چاپ نمودیم. برای درک بستر خروجی مثال، در درس قبلی به تشریح کدهای نوشته شده پرداخته نشد، اما در این درس به بررسی کد مثال می پردازیم.

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

بیایید با کوتاه ترین و پرکاربرد ترین کاراکترها در کد مثال خود شروع کنیم : کاراکترهای { و }. به این کاراکترها در اصطلاح براکت (curly braces) می گویند و در C#، ابتدا و انتهای هر بلوک کد را مشخص می کنند. براکت ها در بسیاری از زبان برنامه نویسی دیگر از جمله C++، جاوا، جاوا اسکریپت و ... نیز استفاده می شوند. همانطور که در مثال مشاهده کردید، براکت ها برای بسته بندی چندین خط کد که مرتبط به هم هستند، استفاده می شوند. در مثال های بعدی، با نحوه استفاده از براکت ها بیشتر آشنا خواهید شد.

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

;using System

;using System.Collections.Generic

;using System.Text

واژه Using یک واژه کلیدی (keyword) است که توسط ادیتورکدها به رنگ آبی نشان داده می شود. واژه کلیدی Using یک namespace را به کد برنامه وارد می کند. Namespace مجموعه ای از کلاس ها هستند که با هم کار خاصی را انجام می دهند. در مثال Hello Word، سه namespace به برنامه اضافه شده اند که هر کدام کار خاصی را در کد برای ما انجام می دهند. برای مثال، ما از کلاس Consale Class که بخشی از System Namespace است برای چاپ مقدار متنی در خروجی استفاده می کنیم.

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

namespace ConsoleApplication1

اکنون namespace ConsaleAppliction1، به عنوان namespace اصلی (main) این برنامه بوده و شامل چندین کلاس خواهد بود. می توانید چندین namespace دیگر نیز که نیاز دارید را ایجاد کرده و در هر کدام کلاس های مورد نظر خود را قرار دهید. سپس همانند سایر namespace ها با استفاده از واژه کلیدی Using آن را به برنامه خود اضافه کنید.

در مرحله بعد، ما کلاس Class مورد نظر خود را ایجاد می کنیم. از آن جا که C# یک زبان شی گرا Object-oriented است، مجموعه کدهای خاص را درون یک کلاس تعریف می کنیم. برای مثال، به وسیله کد زیر یک کلاس به نام Program را تعریف کرده ایم :

class Program

در هر برنامه به تعداد نیاز می توانید کلاس های مختلف تعریف کنید. اما در این مثال، ما فقط یک کلاس خواهیم داشت. هر کلاس می تواند شامل تعدادی متغیر (variable)، خواص (properties) و متدها (methods) باشد، مفهوم هایی که در درس های بعد به تشریح کامل آن ها خواهیم پرداخت. تنها چیزی که الان بایستی بدانید این است که کلاس Program فقط شامل یک متد (method) بوده که به صورت زیر تعریف شده است :

static void Main(string[] args)

خط کد فوق، به احتمال زیاد پیپچیده ترین بخش مثال است. به همین دلیل بیایید ان را به بخش های کوچکی تقسیم کرده و به بررسی هریک بپردازیم.

کلمه اول static است. کلیدواژه یا (keyword) به نام static اعلام می کند که این کلاس بایستی بدون نیاز به نمونه سازی از آن قابل دسترس باشد، راجع به این مسئله در بخش Classes به طور کامل توضیخ می دهیم.

واژه کلیدی بعدی Void است که مشخص می کند آیا متد ما بایستی پس از اجرای کامل، مقداری را برگرداند یا خیر. مقدار برگشتی یک تابع می تواند برای مثال از نوع عددی int، متنی string و یا هیچ چیز (void) باشد. به کار بردن کلمه void در این مثال، به این معنی است که تابع ما هیچ مقداری را پس از اجرا باز نمی گرداند.

واژه کلیدی بعدی Main بوده که نام متد را تعیین می کند. متد Main تابع اصلی هر برنامه C# بوده و اولین قطعه کدی است که در برنامه اجرا می شود.

پس از نام متد، می توانید یک یا چند آرگومان را به عنوان مقادیر ورودی هر متد درون پرانتز تعیین کنید. در مثال ما، متد Main فقط دارای یک آرگومان ورودی به نام args می باشد. آرگومان یک متغیر یا مقدار ثابت است که در هنگام فراخوانی هر تابعی، می تواند به آن ارسال شود. آرگومان args در مثال فوق از نوع متنی و آرایه ای است.

در پایان این درس بایستی درک کلی از برنامه های C# و نحوه کار آن ها پیدا کرده باشید.

با ادامه دوره آموزش سی شارپ همراه باشید.

۱ نظر

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

افشین رفوا

آموزش html5

آموزش 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>‎

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

آموزش صدا در HTML 5

اجازه بدهید در شروع یک سرگرمی داشته باشیم. قرار است در مورد مرورگری صحبت کنیم که فایل صدا را در حالت طبیعی خود پشتیبانی می کند، درست همانطور که برچسب<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

۰ نظر

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

افشین رفوا

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

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

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

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

آموزش #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 فارسی

۹ مطلب در مهر ۱۳۹۸ ثبت شده است

آموزش سی شارپ-

آموزش #C

معرفی ابزار و آموزش کار با Visual C# Express:

توضیح و آموزش ساخت برنامه Hello World در C#

آموزش Html5

ویژگی های <audio>

چگونه؟

نکات

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

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

توضیح کد:

آموزشHtml 5

چرا HTML5 مهم است؟

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

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

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

دوره آموزش react native

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

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

آموزش React native

قسمت اول

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

1. محیط Linux و android