التنقل بين الشاشات — أساسيات React Native

التنقل في React Native

React Navigation

هي المكتبة الأشهر للتنقل في React Native.

التثبيت

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

1. Stack Navigation (التنقل العمودي)

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

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
          name="Home" 
          component={HomeScreen}
          options={{ title: 'الرئيسية' }}
        />
        <Stack.Screen 
          name="Details" 
          component={DetailsScreen}
          options={{ title: 'التفاصيل' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// التنقل
function HomeScreen({ navigation }) {
  return (
    <TouchableOpacity onPress={() => navigation.navigate('Details')}>
      <Text>اذهب للتفاصيل</Text>
    </TouchableOpacity>
  );
}

// تمرير بيانات
navigation.navigate('Details', { itemId: 123, name: 'منتج' });

// استقبال البيانات
function DetailsScreen({ route }) {
  const { itemId, name } = route.params;
  return <Text>المنتج: {name} - ID: {itemId}</Text>;
}

2. Tab Navigation (التنقل بالتبويبات)

npm install @react-navigation/bottom-tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            if (route.name === 'Home') {
              iconName = focused ? 'home' : 'home-outline';
            } else if (route.name === 'Profile') {
              iconName = focused ? 'person' : 'person-outline';
            }
            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: '#3b82f6',
          tabBarInactiveTintColor: '#888',
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

3. Drawer Navigation (القائمة الجانبية)

npm install @react-navigation/drawer

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

// فتح القائمة
navigation.openDrawer();
navigation.closeDrawer();
navigation.toggleDrawer();

دوال التنقل المهمة

// داخل أي شاشة: navigation يصل كـ prop (أو من الخطاف useNavigation())
function NavigationExamples({ navigation }) {
// التنقل لشاشة
navigation.navigate('ScreenName');

// التنقل مع بيانات
navigation.navigate('ScreenName', { id: 1 });

// الرجوع
navigation.goBack();

// إضافة شاشة للمكدس
navigation.push('ScreenName');

// استبدال الشاشة الحالية
navigation.replace('ScreenName');

// الرجوع للشاشة الرئيسية
navigation.popToTop();

// إعادة ضبط التنقل
navigation.reset({
  index: 0,
  routes: [{ name: 'Home' }],
});
}

تخصيص Header

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    title: 'الرئيسية',
    headerStyle: { backgroundColor: '#3b82f6' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
    headerRight: () => (
      <TouchableOpacity onPress={() => alert('!')}>
        <Ionicons name="settings" size={24} color="#fff" />
      </TouchableOpacity>
    ),
  }}
/>