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

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

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

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

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

نصب 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 در فرادرس

کلیک کنید

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

create-react-native-app FirstAndroidApp

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

npm start

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

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

فیلم آموزش ساخت پروژه با 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 سبک‌بندی کند.

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

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

کلیک کنید

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

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

==