React Native چگونه کار می کند؟

در این مقاله قصد دارم به صورت کامل توضیح بدم که React Native چطور کار میکنه و همچنین کامپوننت هایی که در React Native ایجاد میکنید چه تفاوتی با React داره و اینکه چجوری باید کامپوننت ها رو برای اجرا در موبایل ایجاد کنید.

React Native چطور کار میکند؟

ایده نوشتن برنامه های موبایل(اپلیکیشن) با جاوا اسکریپت کمی عجیب و غریب است.چگونه میتوان با استفاده از React که یک کتابخانه برای Front است،اپلیکیشن توسعه داد؟برای درک پایه های فنی React Native ابتدا باید با یکی از ویژگی های React یعنی Virtual DOM آشنا بشید.

در React لایه بین توضیحات توسعه در مورد چگونگی انجام کارها و کار انجام شده برای render اپلیکیشنتون به صفحه Virtual DOM است.برای ایجاد رابط کاربری تعاملی در مرورگر توسعه دهندگان باید DOM یا Document Object Model مرورگر رو ویرایش کنند.

حالا بیاید به React Native نگاه کنیم.به جای render کردن DOM مرورگرReact Native از Objective-C APIs رو برای render کردن کامپوننت های IOS و Java APIs رو برای render کردن کامپوننت های Android فراخوانی میکنه.React Native با این نوع فراخوانی به ارائه اپلیکیشن های مبتنی بر وب پایان داد.

همونطور که در عکس بالا مشاهده میکنیدConnecter حالتی را فراهعم میسازد که رابط کاربری با استفاده از عناصر native UI نمایش داده میشود.کامپوننت های React در تابع render بازگشت داه میشودند و مشخص میشود که چگونه نمایش داده شوند.React برای Web به صورت مستقیم برای DOM مرورگرها translate میشود اما در React Native نشانه گذاری آن با توجه به پلتفرمtranslate می شود بنابراین <View> برای Android به TextView ترجمه میشود.

React Native در حال حاضر از iOS و Android پشتیبانی میکند.React Native به دلیل لایه Virtual DOM میتونه هر پلتفرمی رو مورد هدف قرار بده،فقط نیاز داره که یک شخص connector رو برای پلتفرم موردنظر بنویسه.

ایجاد کامپوننت در React Native

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

کار با Views

زمانی که ما React رو برای Web استفاده میکنیم از اجرای معمولی HTML مثل <div>, <p>, <span>, <a> و … استفاده میکنیم اما در React Native تمامی این اجزا با توجه به پلتفرم در کامپوننت های React جایگزین می شود.

React	React Native
<div>	<View>
<span>	<Text>
<li>, <ul>	<ListView>
<img>	<Image>

<View> یکی از ساده ترین و منعطف پذیرترین اجزای UI در کراس پلتفرم ها است که مشابه <div> است. در IOS به عنوان مثال کامپوننت <View> رو به عنوان UIView و در Android به عنوان View رندر میکند.

برخی از کامپوننت ها در React Native برای پلتفرم طراحی شده است تا کاربر حس native بودن بیشتر بهش دست بده.به مثال زیر توجه کنید

<DatePickerIOS
 date={this.state.date}
 mode="date"
 timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
/>

<DatePickerIOS

date={this.state.date}

mode="date"

timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}

تیکه کد بالا خروجی زیر رو در IOS خواهد داشت

Deep Linking در React Native

برای استفاده از هر کامپوننت React Native باید اون رو از هسته فریمورک ایمپورت کنیم.

var React = require('react-native');
var {
 DatePickerIOS
} = React;

var React = require('react-native');

var {

DatePickerIOS

} = React;

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

به این دلیل که بعضی کامپوننت ها برای هر پلتفرم متفاوت است با مشاهده این مثال ها دقیقا درک میکنید که چجوری کامپوننت های خودتون رو بسازید.در React Native بسیار مهمه که شما جدایی بین کامپوننت ها رو حفظ کنید.

کامپوننت <DatePickerIOS> رو نمیتونید در Android استفاده کنید.اما شما میتونید کامپوننت هایی رو خودتون ایجاد کنید که برای هر دو پلتفرم قابل استفاده باشه.برای مثال شما یک button خاص طراحی مکیند.کافیه که این کامپوننت درون یک فایل مجزا به اسم button باشه و شما در هرجایی که نیاز داشتید ایمپورتش کنید و ازش استفاده کنید.علاوه بر این میتونید در پروژه های دیگه هم استفادش کنید و کامپوننت هاتون reusableبشه.

زمانی که ما در React Native به کامپوننت ها استایل میدیم،خوشبختانه از یک رویکرد استاندارد برای طراحی ظاهر استفاده میکنیم.برای طرح بندی در React Native از flexbox استفاده میکنیم که بر سادگی تمرکز دارد.بر خلاف وب که پشتیبانی از css در مرورگرها متفاوت است.React Native قوانین استایل دهی را به صورت سازگار اجرا میکند.در Reract Native شما همچنین میتونید به صورت inline به کامپوننت ها استایل بدید.البته من توصیه میکنم تا حدممکن از استایل دهی inline استفاده نکنید و استایل ها رو به صورت objects بنویسید.

const styles = StyleSheet.create({
 
 MainContainer :{
 
  flex:1,
  paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  justifyContent: 'center',
  margin:20
 
  },
 
  TextInputStyleClass:{
 
    textAlign: 'center',
    height: 50,
    borderWidth: 2,
    borderColor: '#9E9E9E',
    borderRadius: 20 ,
    backgroundColor : "#FFFFFF",
    height: 150
 
    }
 
});

const styles = StyleSheet.create({

MainContainer :{

flex:1,

paddingTop: (Platform.OS) === 'ios' ? 20 : ,

justifyContent: 'center',

margin:20

TextInputStyleClass:{

textAlign: 'center',

height: 50,

borderWidth: 2,

borderColor: '#9E9E9E',

borderRadius: 20 ,

backgroundColor : "#FFFFFF",

height: 150

}

});

امیدوارم این مقاله تا حدی به شما کمک کرده باشه که متوجه نحوه عملکرد React Native شده باشید و اینکه چه تفاوت هایی با React داره.همچنبن میتونید با خوندن مقاله react native چیست اطلاعات بیشتری در زمینه React Native کسب کنید.

React Native چگونه کار می کند؟

React Native چطور کار میکند؟

ایجاد کامپوننت در React Native

کار با Views

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

React Native چطور کار میکند؟

ایجاد کامپوننت در React Native

کار با Views

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

نمایش عکس های گوشی در react native (ری اکت نیتیو)

دیدگاهتان را بنویسید لغو پاسخ