ساخت اپلیکیشن موبایل با React Native و Expo از صفر

یک کد، دو پلتفرم

ساخت اپلیکیشن جداگانه برای Android با Kotlin و برای iOS با Swift یعنی دو تیم، دو کدبیس و دو برابر هزینه. React Native اجازه می‌دهد با همان دانش React و JavaScript، اپلیکیشن‌هایی بسازید که از کامپوننت‌های واقعی و بومی سیستم‌عامل استفاده می‌کنند. Expo هم با حذف پیکربندی‌های پیچیده‌ی Xcode و Android Studio، شروع کار را به چند دقیقه کاهش داده است.

ساخت پروژه

npx create-expo-app@latest my-app
cd my-app
npx expo start

حالا کافی است اپلیکیشن Expo Go را روی گوشی نصب کنید و QR Code نمایش داده‌شده را اسکن کنید. هر تغییری که در کد بدهید، در کسری از ثانیه روی گوشی دیده می‌شود.

مسیریابی مبتنی بر فایل با Expo Router

مانند Next.js، ساختار پوشه‌ی app مسیرهای اپلیکیشن را تعیین می‌کند:

app/
  _layout.tsx        ← ناوبری اصلی
  (tabs)/
    _layout.tsx      ← تب‌بار پایین صفحه
    index.tsx        ← صفحه‌ی خانه
    profile.tsx      ← پروفایل
  post/[id].tsx      ← صفحه‌ی جزئیات با پارامتر

اولین صفحه با داده‌ی واقعی

import { useEffect, useState } from "react"
import { FlatList, Text, View, ActivityIndicator, StyleSheet } from "react-native"
import { Link } from "expo-router"

type Post = { id: number; title: string }

export default function HomeScreen() {
  const [posts, setPosts] = useState<Post[] | null>(null)

  useEffect(() => {
    fetch("https://example.com/api/posts")
      .then((r) => r.json())
      .then(setPosts)
  }, [])

  if (!posts) return <ActivityIndicator style={{ flex: 1 }} />

  return (
    <FlatList
      data={posts}
      keyExtractor={(item) => String(item.id)}
      renderItem={({ item }) => (
        <Link href={`/post/${item.id}`} style={styles.item}>
          <Text style={styles.title}>{item.title}</Text>
        </Link>
      )}
    />
  )
}

const styles = StyleSheet.create({
  item: { padding: 16, borderBottomWidth: 1, borderColor: "#eee" },
  title: { fontSize: 16, textAlign: "right" },
})

برای لیست‌های طولانی همیشه از FlatList به‌جای map داخل ScrollView استفاده کنید؛ چون فقط آیتم‌های قابل مشاهده را رندر می‌کند.

دسترسی به قابلیت‌های گوشی

Expo برای بیشتر نیازهای رایج، ماژول آماده دارد:

• expo-camera و expo-image-picker: گرفتن عکس یا انتخاب تصویر از گالری.
• expo-notifications: دریافت و نمایش اعلان‌های Push.
• expo-secure-store: ذخیره‌ی امن توکن ورود در Keychain و Keystore.
• expo-location: دریافت موقعیت مکانی با مدیریت خودکار مجوزها.

پشتیبانی از راست‌چین

برای اپلیکیشن فارسی، در app.json گزینه‌ی supportsRTL را فعال کنید و با I18nManager.forceRTL(true) جهت را راست‌به‌چپ کنید. سپس یک فونت فارسی مثل ایران‌یکان را با expo-font بارگذاری کنید تا تجربه‌ی کاربری یکپارچه باشد.

ساخت نسخه‌ی نهایی با EAS

وقتی اپلیکیشن آماده شد، سرویس EAS Build فایل‌های نصبی را در فضای ابری می‌سازد؛ حتی نسخه‌ی iOS را بدون داشتن مک:

npm install -g eas-cli
eas build:configure
eas build --platform android --profile production

خروجی Android یک فایل aab برای گوگل‌پلی یا apk برای کافه‌بازار و مایکت است.

به‌روزرسانی بدون انتشار مجدد

با EAS Update می‌توانید تغییرات JavaScript را مستقیماً به گوشی کاربران برسانید، بدون اینکه منتظر بررسی فروشگاه بمانید. این قابلیت برای رفع سریع باگ‌ها فوق‌العاده است؛ البته تغییرات کد بومی همچنان به بیلد جدید نیاز دارند.

جمع‌بندی

React Native و Expo ساخت اپلیکیشن موبایل را برای توسعه‌دهندگان وب بسیار در دسترس کرده‌اند. با دانش React می‌توانید در چند روز یک اپلیکیشن کامل برای Android و iOS بسازید، آن را در ابر بیلد کنید و به‌روزرسانی‌ها را فوراً به کاربران برسانید.