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



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

آموزش #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# و نحوه کار آن ها پیدا کرده باشید.

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


دوره آموزش 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دوره آموزش 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دوره آموزش 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دوره آموزش 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دوره آموزش React Native

AlignSelf

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

دوره آموزش React Nativeدوره آموزش 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دوره آموزش React Native

فلکس Flex Wrap

دوره آموزش React Native

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

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

دوره آموزش React Nativeدوره آموزش 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دوره آموزش React Native

نگاهی عمیق تر

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

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

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

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

دوره آموزش 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 StudioAndroid 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استفاده از یک 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اجرای یک application React Native

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

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

دوره آموزش React Native

تغییر در application

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

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

تمام شد!

تبریک می گویم. شما اولین برنامه 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 به بالا باشد.

واچ من 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

ایکس کود 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

اگر می خواهید 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

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

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

cd AwesomeProject

react-native run-ios

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

اجرای یک application React Nativeاجرای یک application React Native

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

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

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

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

تغییر در application

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

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

تمام شد!

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

قدم بعدی؟

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

2. Linux/ Windows و iOS

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

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

دوره آموزش React Native

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


تبلیغات

آخرین ارسال ها

آخرین جستجو ها

هر آنچه در مورد لباس کودکانه باید بدانید | نی نی سایت اسباب بازی های من و تو کیمیا اسدی وبلاگ معماری، شهرسازی و هنر دانشگاه پیام نور ارومیه دیجی وندا ابزاری هوشمند برای رسیدن به تکنولوژی دیجیتال فروشگاه اینترنتی شاپ سرا مدیریت بهبود و تعالی امـیــــــد جزوات رایگان تعمیرات لوازم خانگی برنامه ریزی و کنترل پروژه