چگونه با React Native اپلیکیشن اندرویدی بنویسیم؟ – به زبان ساده

React Native امکان نوشتن اپلیکیشن‌های گوشی تلفن همراه را با استفاده از جاوا اسکریپت و React که کتابخانه رابط ساخته شده از سوی فیسبوک است ارائه می‌کند. با استفاده از React Native می‌توان به سادگی کدهای اپلیکیشن را هم برای گوشی‌های اندروید و هم iOS نوشت و دیگر نیازی به یادگیری جاوا (اندروید) و یا C++/Objective C برای (iOS) وجود ندارد.

در این مقاله همه موارد مور نیاز برای آغاز کار با React Native ارائه شده است.

پیش‌نیازهای React Native

اگر از قبل با React آشنا باشید، برای آغاز به کار با React Native دشواری چندانی نخواهید داشت. شما به یک اتصال اینترنتی نیاز دارید و باید بتوانید روی یک شبکه به یک رایانه اتصال یابید.

نصب React Native

نصب React Native کار بسیار ساده‌ای است؛ اما قبل از آن باید Node.js را نصب کنید. ما در مطلب «Node.js چیست و چه نقشی در توسعه وب دارد؟» به معرفی Node پرداخته‌ایم؛ اما اگر بخواهیم به طور خلاصه اشاره کنیم Node.js امکان نوشتن اپلیکیشن‌های «مناسب» سرور و دسکتاپ را با استفاده از جاوا اسکریپت فراهم می‌کند.

به صفحه دانلود Node.js مراجعه کنید و بسته به سیستم عامل خود نسخه ویندوز یا مک را انتخاب کنید. نسخه‌های لینوکسی نیز ارائه شده‌اند؛ اما برای نصب آن‌ها به کار بیشتری نیاز دارید.

زمانی که برنامه نصب دانلود شد، آن را اجرا کنید و توافقنامه لایسنس را پذیرفته و install را بزنید. بدین ترتیب شما نه تنها Node.js بلکه npm را نیز به دست می‌آورید. npm یک ابزار مدیریت بسته جاوا اسکریپت است. بدین ترتیب می‌توانید بسته‌های دیگر مانند React Native را نیز نصب کنید.

ساده‌ترین راه برای شروع به کار با React Native استفاده از برنامه خط فرمان create-react-native-app است. یک ترمینال یا کنسول جدید باز کنید و از npm برای نصب آن استفاده کنید:

npm install -g create-react-native-app

اگر هنگام نصب کردن create-react-native-app با مشکلی مواجه شدید، در این صوت ممکن است لازم باشد مجوزهای دسترسی npm را تغییر دهید. زمانی که نصب شد می‌توانیم اقدام به ایجاد اپلیکیشن خودمان بکنیم.

ایجاد یک اپلیکیشن به روش آسان

در این مرحله شما create-react-native-app را نصب کرده‌اید و می‌توانید نخستین اپلیکیشن خودتان را ایجاد کنید. یک پوشه جدید برای ذخیره‌سازی پروژه ایجاد کنید و در خط فرمان به آنجا مراجعه کنید. از برنامه create-react-native-app برای ایجاد این اپلیکیشن استفاده می‌کنیم.

فیلم آموزش پروژه محور ری اکت نیتیو – طراحی اپلیکیشن BMI در React Native در فرادرس

کلیک کنید

این دستور یک اپلیکیشن به نام FirstAndroidApp می‌سازد:

create-react-native-app FirstAndroidApp

React Native بر اساس نام پروژه (FirstAndroidApp) یک پوشه برای شما ایجاد کرده است به این پوشه بروید و دستور زیر را اجرا کنید:

npm start

بدین ترتیب سرور توزیع آغاز به کار می‌کند. گزینه‌های زیادی برای ری‌استارت کردن سرور وجود دارد که به همراه یک کد QR و آدرس IP سرور ارائه شده است. اینک همه چیز آماده است که اپلیکیشن را روی گوشی خود اجرا کنید:

اجرای اپلیکیشن روی گوشی

برای تست اپلیکیشن روی گوشی باید یک برنامه دیگر به نام Expo را نصب کنید. این برنامه به رایانه شما وصل می‌شود و اپلیکیشن را بارگیری می‌کند. هر تغییری که ایجاد کنید اپلیکیشن به طور خودکار روی گوشی مجدداً بارگیری می‌شود. این برنامه عملکرد بسیار مناسبی دارد و روشی عالی برای توسعه اپلیکیشن محسوب می‌شود.

فیلم آموزش ساخت پروژه با فریم ورک React Native (رایگان) در فرادرس

کلیک کنید

زمانی که Expo نصب شد اطمینان حاصل کنید که گوشی‌تان روی همان شبکه‌ای است که رایانه به آن متصل است. اگر به شبکه دیگری وصل باشد یا فایروال فعال شده باشد، این برنامه نمی‌تواند کار کند.

برنامه Expo را باز کنید و گزینه Scan QR Code را انتخاب کنید. دوربین تلفنتان را به سمت کد QR در خط فرمان بگیرید، پس از چند ثانیه برنامه شما روی گوشی ظاهر می‌شود. اگر به خط فرمان بازگردید چند خط جدید را مشاهده می‌کنید. این خطوط اعلام می‌کنند که کار ساخت اپلیکیشن به پایان رسیده است و این که روی دستگاه در حال اجرا است. اینک زمان آن رسیده است که شروع به نوشتن کد بکنیم.

!Hello, World

اینک React Native درون پوشه FirstAndroidApp شما چندین فایل ایجاد کرده است. یک پوشه به نام node_modules وجود دارد که آن بسته‌های Node که ممکن است برای تکمیل کردن اپلیکیشن نصب کنید را ذخیره کرده است. فایل App.js را در ویرایشگر متنی خود باز کنید.

این فایل شامل 24 خط کد است. چند دستور ایمپورت وجود دارد. یک کلاس به نام App و یک stylesheet وجود دارند:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Open up App.js to start working on your app!</Text>
                <Text>Changes you make will automatically reload.</Text>
                <Text>Shake your phone to open the developer menu.</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

این کد شاید در ظاهر پیچیده به نظر برسد، اما زمانی که با ساختار React Native آشنا شوید می‌دانید که قطعاً چنین نیست. بخش عمده‌ای از دستور زبان React Native شبیه HTML و CSS است.

بررسی کد

در این بخش نگاهی دقیق‌تر به کد خودمان خواهیم داشت. دستورهای ایمپورت ابتدایی تضمین می‌کنند که اپلیکیشن به کامپوننت‌های الزامی React Native که برای کارکرد صحیح خود نیازمند است دسترسی دارد:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

آکولادها ({ StyleSheet, Text, View }) نشان دهنده ایمپورت‌های چندگانه هستند. شما باید یک کلاس App داشته باشید. درون return کدی قرار دارد که گوشی شما نمایش خواهد داد. این زبان نشانه‌گذاری کاملاً شبیه HTML است؛ اما شامل تگ‌های خاص React Native است.

تگ View جایی است که کانتینرهای دیگر قرار می‌گیرند. خصوصیت {style={styles.container این نما (view) را پیکربندی می‌کند تا از stylesheet انتهای فایل استفاده کند. درون تگ view چندین تگ Text وجود دارند. باید متون خود را درون تگ Text قرار دهید. اگر چنین نکنید React Native نمی‌تواند کار کند.

در انتها شیء styles قرار دارد که به صورت ثابت تعریف شده است. این فایل کاملاً شبیه CSS است؛ فقط ظاهر شیءگرای بیشتری دارد. با این حال برای استفاده از آن به ساختار خاص React Native نیاز دارید. اجازه بدهید این کد را تغییر دهیم. برای مثال رنگ‌ها و مقداری از متن را تغییر می‌دهیم. درون CSS مقدار backgroundColor را به green یا هر رنگ دیگر که دوست دارید تغییر دهید:

backgroundColor: '#4caf50',

توجه کنید که کد hex باید درون گیومه تکی باشد. اینک کد را بهبود می‌بخشیم و یک سبک جدید به نام text ایجاد می‌کنیم خصوصیات color، fontSize و fontWieght را اضافه می‌کنیم:

 text: {
    color: '#fff',
    fontSize: 34,
    fontWeight: 'bold'
}

این کد را به زیر عنصر container اضافه می‌کنیم که با یک کاما جدا می‌شود:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#4caf50',
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: '#fff',
        fontSize: 34,
        fontWeight: 'bold',
    }
});

در نهایت متن درون کلاس App را تغییر می‌دهیم:

<Text style={styles.text}>Hello, World!</Text>

با تعیین خصوصیت style به React Native می‌گوییم که متن را بر اساس استایل‌های از پیش تعریف شده در سبک text سبک‌بندی کند.

پلی‌استور بی‌صبرانه منتظر شما است

با این که ما در این نوشته تنها موارد بسیار ابتدایی را معرفی کردیم، اما شما اینک باید با مقدمات چگونگی ساخت اپلیکیشن‌ها کاملاً آشنا شده باشید. بنابراین در این مرحله متوقف نشوید و با بررسی مستندات React Native اطلاعات جامعی در مورد ویژگی‌های آن به دست آورید.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برایتان مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌نویسی اندروید
• مقایسه Swift و React-Native از فریم‌ورک‌های ساخت اپلیکیشن در iOS
• انتخاب پلتفرم مناسب برای ساخت اپلیکیشن — رایانه شخصی، وب، موبایل یا کراس‌پلتفرم
• مجموعه آموزش‌های برنامه‌نویسی
• گوگل فلاتر (Flutter) از صفر تا صد — ساخت اپلیکیشن به کمک ویجت
• مجموعه آموزش های پروژه محور برنامه نویسی

==