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

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

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

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

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

آموزشگاه تحلیل داده مفتخر به آموزش و برپایی دوره های مقدماتی برنامه نویسی تا سطوح پیشرفته و معماری نرم افزار با بیش از پانزده سال در خدمت جویندگان علم و مهارت آموزان باشد.
آموزشگاه تحلیل داده ارایه دهنده به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی است که در این زمینه بی رقیب است
شما عزیزان می توانید با خیال آسوده تمرکزی جز اهداف خویش نداشته باشید
دوره های جدید تحلیل داده در راه است.....
برای اطلاع از این دوره ها با شماره 02188146330 یا 02188146323 تماس حاصل نمایید

۶ مطلب با کلمه‌ی کلیدی «آموزش پروژه محور react native» ثبت شده است

آموزش React native-قسمت ششم

سلام در بخش پنجم آموزش React Native مفاهیم مدیریت ورودی های متنی , بالا و پایین رفتن در لیست ها، swipe کردن، و pinch-to-zoom,استفاده از ScrollView,استفاده از List View در React Native را یاد گرفتیم . حال با بخش ششم با ما همراه باشید:

ارتباطات تحت شبکه در React Native Apps:

اغلب application های موبایل منابع خود را از شبکه load می کنند. ممکن است بخواهید یک POST request به یک REST API بزنید، یا محتوایی ثابت از یک سرور بگیرید.

آموزش React Native

استفاده از Fetch:

ری اکت React Native، Fetch API را برای کارهای تحت شبکه در اختیار می گذارد. اگر از XMLHttpRequest یا API های دیگر استفاده کرده باشید با fetch آشنایید. می توانید برای مطالعه ی بیشتر به راهنمای MDN درمورد نحوه استفاده از Fetch مراجعه کنید.

Request

برای دریافت محتوا از یک آدرس فرضی، کافی است آدرس را به fetch() بدهید:

fetch('https://mywebsite.com/mydata.json');

همچنین fetch یک آرگومان دیگر هم می تواند بگیرد و به شما امکان کنترل بیشتری روی HTTP request بدهد. ممکن است بخواهید header اضافه کنید، یا یک request POST بزنید:

fetch('https://mywebsite.com/endpoint/', {

method: 'POST',

headers: {

Accept: 'application/json',

'Content-Type': 'application/json',

},

body: JSON.stringify({

firstParam: 'yourValue',

secondParam: 'yourOtherValue',

}),

});

برای لیست کامل property ها سری به مستندات Fetch Request بزنید.

مدیریت Response ها

مثال بالا نحوه ارسال یک request را نشان می دهد. در بسیاری موارد ممکن است بخواهید روی response سرور کاری انجام دهید.

ارتباطات در شبکه ذاتا async هستند. متد Fetch یک Promise برمی گرداند که نوشتن کد برای سناریوهای async را آسان می کند:

function getMoviesFromApiAsync() {

return fetch('https://facebook.github.io/react-native/movies.json')

.then((response) => response.json())

.then((responseJson) => {

return responseJson.movies;

})

.catch((error) => {

console.error(error);

});

}

میتوان از دستور async/await در ES2017 نیز در یک application React Native استفاده کرد:

async function getMoviesFromApi() {

try {

let response = await fetch(

'https://facebook.github.io/react-native/movies.json',

);

let responseJson = await response.json();

return responseJson.movies;

} catch (error) {

console.error(error);

}

}

فراموش نکنید که خطاهای ممکن هنگام کار با fetch را catch کنید، در غیر این صورت هیچ هشداری نخواهد بود.

import React from 'react';

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

export default class FetchExample extends React.Component {

constructor(props){

super(props);

this.state ={ isLoading: true}

}

componentDidMount(){

return fetch('https://facebook.github.io/react-native/movies.json')

.then((response) => response.json())

.then((responseJson) => {

this.setState({

isLoading: false,

dataSource: responseJson.movies,

}, function(){

});

})

.catch((error) =>{

console.error(error);

});

}

render(){

if(this.state.isLoading){

return(

<View style={{flex: 1, padding: 20}}>

<ActivityIndicator/>

</View>

)

}

return(

<View style={{flex: 1, paddingTop:20}}>

<FlatList

data={this.state.dataSource}

renderItem={({item}) => <Text>{item.title}, {item.releaseYear}</Text>}

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

/>

</View>

);

}

}

به طور پیش فرض iOS تمام request هایی را که encryp نشده اند و از SSL استفاده نمی کنند block می کند. اگر می خواهید از آدرسی بدون SSL، دیتا بگیرید ابتدا باید یک App Transport Security exception اضافه کنید. اگر از قبل می دانید که کدام دامنه ها استفاده می شوند، بهتر است فقط برای آن دامنه ها exception اضافه کنید. اگر دامنه ها تا زمان اجرا مشخص نیستند می توانید ATS را کامل غیرفعال کنید. البته از ابتدای 2017، برای غیرفعال کردن ATS به دلیلی موجه احتیاج دارد. مستندات Apple را برای اطلاعات بیشتر ببینید.

استفاده از کتابخانه های دیگر

ایکس ام ال XMLHttpRequest API در React Native هست، به این معنا که شما می توانید از کتابخانه های فرعی مثل frisbee یا Axios که براساس آن نوشته شده اند استفاده کنید، یا خود XMLHttpRequest API را مستقیما استفاده کنید.

var request = new XMLHttpRequest();

request. = (e) => {

if (request.readyState !== 4) {

return;

}

if (request.status === 200) {

console.log('success', request.responseText);

} else {

console.warn('error');

}

};

request.open('GET', 'https://mywebsite.com/endpoint/');

request.send();

امنیت برای XMLHttpRequest در application ها متفاوت از web است، چرا که مفهوم CORS در application معنا ندارد.

آموزش React Native

پشتیبانی از Web Socket

React Native از Web Socket نیز پشتیبانی می کند، پروتکلی که کانال های دوطرفه ارتباطی را روی یک ارتباط TCP فراهم می کند:

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {

// connection opened

ws.send('something'); // send a message

};

ws. = (e) => {

// a message was received

console.log(e.data);

};

ws. = (e) => {

// an error occurred

console.log(e.message);

};

ws. = (e) => {

// connection closed

console.log(e.code, e.reason);

};

مشکلات رایج در رابطه با fetch و احراز هویت مبتنی بر کوکی ها (cookie based authentication)

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

· استفاده از redirect:manual

· استفاده از credentials:omit

· داشتن header های با نام یکسان در android. یک راه حل موقت در این لینک قابل پیاده سازی است.

· احراز هویت مبتنی بر Cookie فعلا ناپایدار است. می توانید issue های مشابه را در اینجا ببینید.

· در iOS وقتی خطای 302 اتفاق می افتد، اگر در کوکی Set-Cookie وجود داشته باشد، Cookie به درستی set نمی شود. از آنجا که redirect نمی تواند دستی انجام شود، اگر redirect حاصل یک session expired باشد، ممکن است request ها درون یک infinite loop بیفتد.

13. منابع دیگر در حوزه React Native

تا اینجای کار را با ما همراه بودید، اکنون می توانید یک application React Native برای خودتان بنویسید. اما React Native فقط یک محصول نیست، بلکه جامعه ای از توسعه دهندگان است. اگر به React Native علاقه مند هستید، مواردی هست که ممکن است بخواهید سری به آن بزنید:

کتابخانه های معروف

اگر از React Native استفاده می کنید، احتمالا با React آشنا هستید. اگر درمورد React چیزی نمی دانید، React بهترین راه برای ساخت یک وب سایت مدرن است. حتما کار با آن را تجربه کنید.

یکی از سوالات رایج این است که چطور "state" application React Native خود را کنترل کنیم. معروف ترین کتابخانه برای این کار Redux است. Redux کتابخانه ای ساده است و فیلم های آموزشی آن نیز موجود است.

اگر دنبال کتابخانه ای برای کاری خاص می گردید، Awesome React Native را چک کنید. لیستی از component ها با پیش نمایش و مقالات مرتبط و... در دسترس خواهد بود.

مثال ها

اگر به دنبال قابلیت های application های React Native هستید، Showcase را ببینید. همچنین، مثال هایی در Github موجود هستند. می توانید این application ها را در شبیه ساز یا device خود ببینید، و میتوانید source code ها را استفاده کنید.

سازندگان applicationبرای Facebook&#x27;s F8 کد آن را متن باز در اختیار عموم گذاشته اند و سری آموزش های خوبی برای آن هست. اگر دنبال مثال های واقعی تر و عمیق تری هستید، سری به آن بزنید.

توسعه ی React Native

توسعه دهندگان ماژول های React Native خود را می سازند و در npm منتشر می کنند و کد آن را در Github به اشتراک می گذارند.

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

راهنما های مربوط به ماژول های native(برای iOS و android)، و component های native برای UI (برای iOS و android) را بخوانید. (لینک ها درون همین آموزش)

اگر دنبال component های آماده می گردید سری به JS.coach یا Native Directory بزنید.

ابزارهای توسعه

در ری اکت Nuclide یک IDE است که Facebook برای توسعه ی جاوااسکریپت از آن استفاده می کند که قابلیت فوق العاده ای در debug دارد. VS Code هم IDE دیگری است که بین توسعه دهندگان جاوااسکریپت معروف است.

در ری اکت Ignite یک package خوب برای شروع است که از Redux و کتابخانه های حاوی component های UI دیگر استفاده می کند. همچنین، برای تولید application، component و container، میتوان از CLI آن استفاده کرد.

در ری اکت App Center سرویسی از Microsoft است که deploy بروزرسانی های لحظه ای application را آسان می کند. اگر نمی خواهید برای deploy درگیر پروسه App Store ها شوید و نمی خواهید backend خودتان را داشته باشید، آن را امتحان کنید.

در ری اکت Expo یک محیط توسعه است که به شما امکان ساخت application های React Native بدون نیاز به xcode یا Android Studio را می دهد.

در ری اکت Yoga ابزاری برای ساخت layout است که امکان ساخت انواع layout برای پلتفرم های مختلف را می دهد.

در ری اکت Bugsnag، Microsoft App Center و Sentry، همه سرویس های خوبی برای نظارت به نحوه کار application های React Native ارائه می دهند. این سرویس ها به شما امکان مانیتورcrash ها و مشکلات app به صورت real time را می دهد و می توانید سریعا آن را رفع کنید.

ابزار React Developer Tools برای debug اپلیکیشن های React و React Native عالی است.

14. تنظیماتی برای بهبود عملکرد Flatlist در React Native

اصطلاحات

در ری اکت VirtualizedList: component پایه ی FlatList (پیاده سازی React Native از مفهوم virtual List)

در ری اکت Memory consumption: میزان اطلاعات از لیست که در حافظه نگه داری می شود، که ممکن است منجر به توقف ناگهانی application شود.

در ری اکت Responsiveness: توانایی application برای پاسخ به تعاملات کاربر. پایین بودن سرعت پاسخگویی، مثلا هنگامی که یک component را touch می کنید و باید کمی صبر کنید تا پاسخ بگیرید، قابل مشاهده است.

در ری اکت Blank areas: وقتی VirtualizedList نمی تواند آیتم ها را با سرعت کافی render کند، ممکن است بخشی از لیست به جای آیتم ها، فضایی سفید به کاربر نشان داده شود.

در ری اکت Viewport: فضای قابل رویت از محتوا، حاوی pixel های render شده

در ری اکت Window: فضایی که آیتم ها باید در آن load شوند، که عمدتا از Viewport بزرگتر است.

در ری اکت Props

در اینجا لیستی از props ها را می بینید که می توانید از آن ها برای بهبود عملکرد FlatList استفاده کنید:

RemoveClippedSubviews

TYPE

DEFAULT

Boolean

False

اگر مقدار آن true باشد، viewهای بیرون از viewport را حذف می کند.

مزایا: این کار زمان صرف شده روی thread اصلی را کم می کند، و در نتیجه با حذف viewهای خارج از viewport احتمال drop شدن frame ها را کم می کند.

معایب: این پیاده سازی ممکن است bug داشته باشد. مثلا محتوایی از دست برود (بیشتر در iOS مشاهده شده)، به خصوص زمانی که کارهای پیچیده ای با transforms ها یا absolute positioning انجام می دهید. برای صرفه جویی در مصرف memory هم چندان کاربرد ندارد، چرا که viewها فقط detach می شوند.

MaxToRenderPerBatch

MaxToRenderPerBatch
MaxToRenderPerBatch

این یک prop مختص VirtualizedList است که می تواند توسط FlatList مقداردهی شود. مقدار آیتم های render شده در هر scroll را تعیین می کند.

مزایا: تعیین یک عدد بزرگتر به معنای کم شدن فضای خالی هنگام scroll کردن خواهد بود.

معایب: آیتم بیشتر به ازای هر scroll زمان بیشتری برای اجرای کد جاوااسکریپت می گیرد و احتمال block شدن پردازش eventهای دیگر هست و سرعت پاسخگویی را کم می کند.

UpdateCellsBatchingPeriod

UpdateCellsBatchingPeriod
UpdateCellsBatchingPeriod

مقدار این property تعیین کننده ی تاخیر به میلی ثانیه بین render کردن دیتا در هر scroll است.

مزایا: استفاده از این property در کنار maxToRenderPerBatchبرای مثال این امکان را می دهد که آیتم های بیشتر با scrollکمتر، یا آیتم های کمتر در scroll های بیشتر، داشته باشیم.

معایب: تاخیر بین render شدن دیتا در هر scroll ممکن است باعث ایجاد فضای خالی شود، تاخیر کمتر ممکن است موجب کاهش سرعت پاسخگویی applicationشود.

InitialNumToRender

InitialNumToRender
InitialNumToRender

دوره آموزش React Native

مقدار اولیه آیتم ها برای render شدن را معین می کند.

مزایا: تعداد آیتم های load شده را در صفحه تمام device ها معین می کند. این ممکن است بشدت روی بهبود عملکرد application هنگام render شدن برای اولین بار، تاثیر بگذارد.

معایب: در نظر گرفتن مقدار کمی برای initialNumToRender ممکن است باعث بوجود آمدن فضای خالی شود، به ویژه اگر عدد به قدری کم باشد که viewport را در هنگام render شدن اولیه، پر نکند.

windowSize

windowSize
windowSize

این عدد یک واحد اندازه گیری است، که در آن 1 معادل height viewport شماست. مقدار پیش فرض آن 21 است (10 برابر viewport از بالا، 10 برابر آن از پایین و یکی برای وسط).

مزایا: مقدار بزرگتر برای windowSize احتمال دیدن فضای خالی هنگام scroll را کم می کند. درمقابل، مقدار کمتر در مصرف memory صرفه جویی می کند، چرا که تعداد آیتم هایی که همزمان load می شوند، کم می شود.

معایب: بزرگ شدن windowSize به مصرف بیشتر memory منتج می شود و کوچکتر شدن آن احتمال دیدن فضای خالی را بیشتر می کند.

LegacyImplementation

LegacyImplementation
LegacyImplementation

این property، FlatList را مجبور می کند از پیاده سازی قدیمی و منسوخ شده ی ListView به جای VirtualizedList استفاده کند.

مزایا: مشکل فضای خالی و bug های VirtualizedList نخواهید داشت.

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

لیست List item ها

در این بخش نکاتی درمورد component های list item مطرح شده است. List item ها هسته اصلی لیست ها هستند، و عملکردشان اهمیت زیادی دارد.

از component های ساده استفاده کنید.

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

از component های سبک استفاده کنید

هرچه component هایتان سنگین تر باشند، سرعت render شدنشان پایین می آید. از عکس های سنگین استفاده نکنید (از thumbnail عکس یا نسخه crop شده آن استفاده کنید). تا جایی که ممکن است effect ها و تعاملات و اطلاعات درون لیست را کم کنید. آیتم ها را بعدا می توانید با هرمقدار جزئیات که می خواهید به طور مستقل نمایش دهید.

از shouldComponentUpdate استفاده کنید

در React، PureComponent خودش یک تابع shouldComponentUpdate با پیاده سازی ساده ای درحد یک مقایسه، دارد. این تابع هزینه بر است چرا که همه ی props ها را چک می کند. اگر تابعی با عملکرد بهتر می خواهید، طوری آن را پیاده سازی کنید که فقط props هایی که احتمالا تغییر کرده اند را، چک کند. اگر لیست ساده پیاده سازی شده باشد حتی می توانید از قطعه کدی مثل کد زیر استفاده کنید:

shouldComponentUpdate() {

return false

}

از عکس های بهینه شده cache شده استفاده کنید

برای بهبود عملکرد برنامه حین کار با عکس ها، می توانید از package هایی مثل react-native-fast-image که توسط DylanVann@ توسعه داده شده، استفاده کنید. هر عکس در لیست یک instance از new Image() است. هرچه سریعتر عکس به loaded hook برسد، Thread جاوااسکریپت مختص آن سریعتر آزاد می شود.

از getItemLayout استفاده کنید

اگر تمام component های مربوط به آیتم های درون لیست height یکسانی دارند، (یا width یکسان برای لیست های افقی) استفاده از این prop، FlatList را از قید محاسبه های async مربوط به layout، آزاد کند.

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

اگر component ها سایز متفاوت دارند و باز هم می خواهید performance خوبی داشته باشید، طراحی خود را تغییر دهید.

از keyExtractor یا key استفاده کنید

برای FlatList خود از keyExtractor استفاده کنید. این prop برای caching استفاده می شود و به عنوان نوعی کلید برای نگه داری ترتیب آیتم ها استفاده می شود. همچین می توانید از یکprop key درون آیتم ها استفاده کنید.

از anonymous function در renderItem استفاده نکنید

تابع renderItem را بیرون تابع render بگذارید، به این شیوه از بازسازی اش در هربار render شدن جلوگیری کرده اید.

renderItem = ({ item }) => (<View key={item.key}><Text>{item.title}</Text></View>);

render(){

// ...

<FlatList

data={items}

renderItem={renderItem}

/>

// ...

}

15. Component ها و API ها در React Native

آموزش React Native

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

۱ نظر موافقین ۰ مخالفین ۰ ۰۹ آبان ۹۸ ، ۱۶:۲۰
افشین رفوا

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

</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}} />

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

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

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

<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}} />

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

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

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

<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}} />

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

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

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

<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}} />

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

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

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

<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}} />

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

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

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

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

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

<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 (

<Image source={pic} style={{width: 193, height: 110}}/>

);

}

}

// 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 (

<View style={{alignItems: 'center'}}>

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

</View>

);

}

}

export default class LotsOfGreetings extends Component {

render() {

return (

<View style={{alignItems: 'center', top: 50}}>

<Greeting name='Rexxar' />

<Greeting name='Jaina' />

<Greeting name='Valeera' />

</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>

<Blink text='I love to blink' />

<Blink text='Yes blinking is so great' />

<Blink text='Why did they ever take this out of HTML' />

<Blink text='Look at me look at me look at me' />

</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.red}>just red</Text>

<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 style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

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

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

</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 style={{flex: 1}}>

<View style={{flex: 1, backgroundColor: 'powderblue'}} />

<View style={{flex: 2, backgroundColor: 'skyblue'}} />

<View style={{flex: 3, backgroundColor: 'steelblue'}} />

</View>

);

}

}

// skip this line if using Create React Native App

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

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

پایان بخش سوم آموزش 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

۰ نظر موافقین ۰ مخالفین ۰ ۰۴ مهر ۹۸ ، ۱۵:۳۹
افشین رفوا

آموزش 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 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 نصب شوند.

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 را باید تغییر دهید.

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

مطمئن شوید که از مسیر صحیح 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 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" ببینید. دنبال آیکنی شبیه عکس زیر بگردید:

AVD ManagerAVD 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اجرای یک 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

۰ نظر موافقین ۰ مخالفین ۰ ۰۴ مهر ۹۸ ، ۱۵:۳۷
افشین رفوا