الخبير
البداية

إنشاء مشروع متكامل

خطوات إنشاء مشروع Expo متكامل مع TypeScript و Expo Router

إنشاء مشروع متكامل

في هذا الدرس ستتعلم كيفية إنشاء مشروع Expo جاهز للإنتاج مع أفضل الممارسات.

إنشاء المشروع

npx create-expo-app@latest my-app --template tabs
cd my-app

القالب tabs يأتي مع:

  • Expo Router مُعد مسبقاً
  • تبويبات تنقل سفلية
  • TypeScript
  • صفحات أساسية جاهزة

إضافة المكتبات الأساسية

# مكتبات واجهة المستخدم
npx expo install react-native-reanimated react-native-gesture-handler

# التخزين المحلي
npx expo install @react-native-async-storage/async-storage

# أيقونات
npx expo install @expo/vector-icons

إعداد TypeScript

أنشئ ملف types/index.ts لتعريف الأنواع المشتركة:

// types/index.ts
export interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string;
}

export interface ApiResponse<T> {
  data: T;
  success: boolean;
  message?: string;
}

إعداد الثوابت

// constants/Colors.ts
export const Colors = {
  light: {
    text: '#1a1025',
    background: '#ffffff',
    primary: '#7c3aed',
    secondary: '#f3f0f7',
    border: '#e5dff0',
  },
  dark: {
    text: '#ffffff',
    background: '#0a0010',
    primary: '#a78bfa',
    secondary: '#1a1a2e',
    border: '#27272a',
  },
};

تشغيل المشروع

# تشغيل على iOS
npx expo start --ios

# تشغيل على Android
npx expo start --android

# تشغيل على الويب
npx expo start --web

ملاحظة: للتشغيل على iOS تحتاج macOS مع Xcode. للتشغيل على Android تحتاج Android Studio أو هاتف Android مع Expo Go.

الخطوة التالية

تعلم كيفية إعداد التنقل باستخدام Expo Router.

On this page