آموزش ساخت برنامه موبایل توسط React Native

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

آموزش ساخت برنامه موبایل توسط React Native – قسمت اول

Hello React Native !

قبل از شروع کار روی اپلیکیشن, میخواهیم یک اپلیکیشن ساده Hello World بسازیم. همچنین در مسیر کار با کامپوننت های مختلف آشنایی پیدا می کنید.

فالی index.ios.js رو در ویرایشگر فایل محبوبتون باز کرده و محتوای فعلی رو پاک کنید, چون میخواهیم اپلیکیشن رو از اول خودمون بسازیم.

کد زیر رو در شروع فایل قرار دهید :

'use strict';

این کد Strick Mode رو فعال می کنه که کنترل کننده خطاها رو بهبود داده و یکسری ویزگی های بدون استفاده ی جاوا اسکریپت رو حذف می کنه. در حقیقت باعث میشه جاوا اسکریپت بهتره بشه.

نکته : برای مطالعه بیشتر در مورد Strick Mode شما رو به مقاله‌ای از Jon Resig ارجاع میدم : ECMAScript 5 Strict Mode, JSON, and More.

حالا خط‌های زیر رو اضافه کنید :

import React from 'react';

import { StyleSheet  , Text , AppRegistry } from "react-native";

این کد ماژول های react و react native رو اضافه می کنه و اونها رو به متغیرهای React و ReactNative الحاق می کنه. React Native از تکنولوژی بارگزاری ماژول در Node.js توسط تابع require استفاده می کنه, که تقریباً معادل وارد کردن کتابخانه‌ها در Swift هست.

نکته : برای کسب اطلاعات بیشتر در مورد ماژول های جاوا اسکریپت این مقاله رو مطالعه کنید.

زیر بخش require این کد رو اضافه کنید :

var styles = StyleSheet.create({

  text: {

    color: 'black',

    backgroundColor: 'white',

    fontSize: 30,

    margin: 80

  }

});

این یک style که شما به متن 'Hello World' خودتون اعمال می‌کنید رو تعریف می کنه. اگر شما قبلاً در زمینه توسعه وب کار کرده باشید قطعاً شما با این کد آشنایی دارید. کلاس استایل StyleSheet برای استایل دهی به UI اپلیکیشن شبیه CSS در وب هست.

حالا کد زیر رو که استایل تعریف شده در بالا رو مورد استفاده قرار میده وارد نمایید :

class PropertyFinderApp extends React.Component {

    render() {
        return (
            <Text style={styles.text}>"Hello World!"</Text>
        )
    }

}

این یک کلاس جاوا اسکریپت است. کلاس‌ها در ES6 معرفی شدند. از اونجا که جاوا اسکریپت دائماً درحال تغییر هست, توسعه دهندگان یک محدودیت دارند که باید کدهاشون با مرورگرها و سیستم عامل های قدیمی هم سازگاری داشته باشه. از اونجایی که IOS 9 بطور کامل از ES6 پشتیبانی نمی کنه, React Native از ابزاری به اسم Babel برای انتقال خودکار جاوا اسکریپت مدرن به جاوا اسکریپت سازگار مورد نیاز استفاده می کنه.

نکته : اگر شما یک توسعه‌دهنده وب هستید, شما میتونید از Babel در مروگر بخوبی استفاده کنید! دیگه هیچ دلیلی برای استفاده از ورژنهای قبل جاوا اسکریپت وجود نداره.

کلاس PropertyFinderApp همینطور که مشاهده کردید React.Component رو توسعه میده (extends), که این بلاک پایه ی React UI هست. کامپوننت ها شامل خواص غیرقابل تغییر, متغیرهای قابل تغییر و ارائه یک تابع برای رندر کردن هستند. برای اپلیکیشن فعلی کار سادست و فقط یک متد رندر نیاز داره.

درنهایت کد زیر رو در انتهای فایل وارد کنید :

AppRegistry.registerComponent('PropertyFinder', () => PropertyFinderApp );

AppRegistry نقطه ورود به اپلیکیشن رو تعریف می کنه و کامپوننت های اصلی رو فراهم می کنه.

تغییرات رو در فایل index.ios.js ذخیره کنید و به Xcode برگردید. مطمئن بشید که طرح PropertyFinder با یکی از شبیه سازهای آیفون انتخاب شده و سپس پروژه رو build و run کنید. بعد از چند ثانیه شما اپلیکیشن Hello World رو بصورت اجرا شده مشاهده می‌کنید :

این یک اپلیکیشن جاوا اسکریپت هست که در شبیه ساز اجرا شده, یک UI بصورت Native رندر می‌کند بدون هیچ نشانی از مرورگرها!

اگر هنوز به این یقین پیدا نکردید داخل Xcode به مسیر Debug\View Debugging\Capture View Hierarchy برید و نگاهی به native view hierarchy بیاندازید. شما هیچ موجودی از UIWebView نمی‌بینید ! متن شما روی یک view به نام RCTText نمایش داده شده. اما دلیل این اتفاق چیه ؟ به Xcode برگردید و مسیر File\Open Quickly... رفته و RCTView.h رو تایپ کنید. متوجه میشید که RCTView مستقیم از UIView ارث بری می کنه!

اگر توسط Safari به آدرس http://localhost:8081/index.ios.bundle برید شما کد جاوا اسکریپت رو برای اپلیکیشن تون می بینید, شما میتونید کد Hello World رو در ساختار React Native مشاهده کنید!

دوباره اجرا کردن یک اپلیکیشن React Native به سادگی رفرش کردن یک مرورگر وب هست. نکته اینجاست که این کار تغییرات کد جاوا اسکریپت رو اعمال می کنه – کد Native یا تغییرات resource نیازمند rebuild در Xcode هست.

ساخت اپلیکیشن Hello World تا اینجا کافیه. در مقاله بعد سراغ ساخت اپلیکیشن اصلی مون میریم و درمورد React Native بیشتر یاد می گیریم.

منبع