البداية
إنشاء مشروع متكامل
خطوات إنشاء مشروع 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.