بخش 1

Install#

توسط دستور زیر می توان expo را نصب کنیم:

npm install --global expo-cli

توسط دستور زیر می توان یک پروژه expo ساخت:

expo init first-project

🎉 حال باید android studio را نصب کنیم و سپس باید در سایت soft98 فایل java SE development kit را دانلود کنیم (jdk)

🎉 می توان از نرم افزار expo Go رو گوشی استفاده کرد برای کار کردن و نمایش خروجی و هم چنین می توان از AVD خود Android Studio نیز استفاده کرد تا یک مجازی ساز را روی سیستم نصب کند.

Tips#

🎉 در React Native در واقع flex به صورت پیش فرض تمام عرض و ارتفاع باقی مانده را به خود اختصاص می دهد و می توان درون آن دوباره از flex برای فرزندان نیز استفاده کرد:

    <View style={{flex :1 }}>
        <View style={{flex :1, backgroundColor: '#FF5722'}} />
        <View style={{flex :2, backgroundColor: '#673AB7'}} />
        <View style={{flex :3, backgroundColor: '#FFEB3B'}} />
    </View>

🎉 برای اینکه یک تابع را در یک useState استفاده کنیم و چون مرسوم است که useState در ابتدای بدنه function تعریف شود، باید تابع مورد نظر را در خارج از بدنه تابع اصلی تعریف کنیم:

    import React, { useState } from "react";
    import {Text, View } from "react-native";

    const minutesToMillis = (min) => min * 1000 * 60;

    export const Countdown = ({ minutes = 20, isPaused }) => {
    const [millies, setMillies] = useState(minutesToMillis(minutes))
    return (
        <View><Text>{millies}</Text></View>
    );};

🎉 از دستور زیر می توان برای reset کردن metro استفاده کنیم:

npx react-native start --reset-cache

🎉 برای استفاده از قابلیت عمودی و افقی برنامه expo go باید در فایل app.json، بخش orientation را تغییر دهیم:

{
  "expo": {
    "orientation": "default"
    }
}

که 3 حالت دارد :portrait، landscape و default ک ما ب صورت بالا می نویسیم ک یعنی بر اساس تنظیمات گوشی باشد و برنامه را یکبار باید reload کنیم.

🎉 بهتر است ک فولدر asstes و components را درون یک فولدر ب نام app قرار دهیم و در فایل app.json آدرس موارد استفاده شده از assets را درست کنیم تا ساختار فایل ها بهتر شود.

debugging#

🎉 برای اینکه وارد حالت developer tools شویم، در emulator باید دکمه های ctrl + m را بزنیم و روی موبایل شخصی در expo باید گوشی را تکان دهیم و سپس گزینه debug remote JS را می زنیم

حال می توان از console.log استفاده کنیم و لاگ کد ها را ببینیم

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

می توان از watch نیز برای معرفی variable هایمان استفاده کنیم ک بعد از معرفی، ب ما مقدار لحظه ای آن ها را میدهد.

می توان پشت هر خطی از کد ها کلیک کنیم تا یک indicator پشت آن اضافه شود و هر وقت کد های ما اجرا شدن و ب آن نقطه رسید، debugger روند اجرای برنامه را متوقف کند و برای اینکه هر بار ک اجرای برنامه تمام می شود، دوباره ب breakpoint. مشخص شده برگردیم، باید برنامه را reload کنیم.

فراموش نشود ک بعد از اتمام کارمان حتما دوباره ctrl + m و stop remote debugging را بزنیم چون باعث کاهش سرعت توسعه می شود.

🎉 ما می توانیم از نرم افزار های غیره هم برای مجازی ساز هم استفاده کنیم مثل : nox player و blue stack و غیره

publish in expo#

برای اینکه یک پروژه را روی سرور خود expo پابلیش کنیم و در دسترس دوستان و همکاران قرار دهیم بدون اینکه فایل نصبی آن را بسازیم، می توانیم ب صورت زیر عمل کنیم:

ابتدا پروژه را اجرا می کنیم و سپس در مرورگر روی گزینه Publish or republish project کلیک میکنیم
حال وارد ترمینال ادیتورمان می شویم و از همانجا وارد اکانت expo خودمان می شویم و یا اگر اکانتی نداریم، همانجا می توان ساخت و یا وارد سایت خود expo شد و یک اکانت جدید ساخت
حال صبر میکنیم تا پروسه ساخت تمام شود و سپس با استفاده از لینکی ک expo در اختیارمان می گذارد، نرم افزار خودمان را ب اشتراک بگذاریم.