بناء تطبيقات الهاتف مع React Native وExpo في 2026

React Native مع Expo

ابنِ تطبيقات جوال عبر المنصّات باستخدام React Native و Expo.

إعداد المشروع

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

المكوّنات الأساسية

import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';

export default function HomeScreen() {
    return (
        <View style={styles.container}>
            <Image
                source={{ uri: 'https://example.com/image.jpg' }}
                style={styles.image}
            />
            <Text style={styles.title}>Welcome!</Text>
            <TouchableOpacity style={styles.button} onPress={() => {}}>
                <Text style={styles.buttonText}>Get Started</Text>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
    image: { width: 200, height: 200, borderRadius: 100 },
    title: { fontSize: 24, fontWeight: 'bold', marginVertical: 20 },
    button: { backgroundColor: '#007AFF', padding: 15, borderRadius: 10 },
    buttonText: { color: 'white', fontWeight: '600' },
});

التنقّل (Navigation)

// Install: npx expo install @react-navigation/native @react-navigation/stack

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="Profile" component={ProfileScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

إدارة الحالة باستخدام Zustand

import { create } from 'zustand';
import AsyncStorage from '@react-native-async-storage/async-storage';

const useAuthStore = create((set) => ({
    user: null,
    login: async (credentials) => {
        const user = await api.login(credentials);
        await AsyncStorage.setItem('user', JSON.stringify(user));
        set({ user });
    },
    logout: async () => {
        await AsyncStorage.removeItem('user');
        set({ user: null });
    },
}));

البناء للإنتاج

# Build for both platforms
eas build --platform all

# Submit to stores
eas submit --platform ios
eas submit --platform android

يبسّط Expo تطوير React Native بسير عمل مُدار وتحديثات عبر الأثير (OTA).