دليل كامل لرد الفعل الملاحي الأصلي باستخدام الملاحة الركية

مقدمة

(د) إن الجانب الحاسم من تطوير التطبيقات المتنقلة هو الملاحة: توجيه المستخدمين من خلال مختلف الشاشات والسمات دون هوادة. React Navigation هي أكثر المكتبات شعبية وتوجهاً على صعيد المجتمع المحلي لتنفيذ الملاحة في التطبيقات الخاصة بالمنشأة، وهي توفر أداة بيانية واضحة، تدعم نظام المعلومات المسبقة عن البضائع.

الشروط الأساسية والتركيب

قبل استخدام "النافايج" للرد على الرّد، تأكد أنّ لديك مشروع "ناي" الأصليّة، إن بدأتِ في التأريخ، استخدمي "مُعالجة الـ"ناجين" أو "مُعرضة"

تركيب مجموعات أساسية

تركيب الطرود المطلوبة عن طريق النوم أو الرذاذ، المكتبة الأساسية وعواقبها الرئيسية هي:

npm install @react-navigation/native

ثم تركيب المكتبات الداعمة التي يعتمد رد الفعل على إدارة الشاشة والمناولة الآمنة للمناطق:

npm install react-native-screens react-native-safe-area-context

إذا كنت تستخدم برنامج " سترو " ، فإن هذه المكتبات مدرجة بالفعل، أما بالنسبة للمشاريع الأصلية التي لا تصلح، فتتبع تعليمات الربط في الوثائق الرسمية لضمان ارتباط الوحدات المحلية ارتباطا صحيحا (تربط بين هذه البرامج وبين شركة " React Native 0.60+ " ).

تركيب نافيغير

ويوفر نظام الملاحة المكثفة عدة ملاحين، ويوصى باستخدام معظم الحالات:

npm install @react-navigation/native-stack

Other navigators like bottom tabs and ]drawer]] are installed separately:

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

المفاهيم الأساسية

تُبنى الملاحة الركنية على ثلاثة بنايات رئيسية:

• NavigationContainer] - the outermost wrapper that manages the navigation tree and state.
• Navigators] - components that define the navigation pattern (stack, tab, drawer).
• Screens] - كل عنصر من العناصر التي تمثل وجهة نظر أو صفحة في التطبيق.

ويجب أن تكون كل مجموعة من الملاحين ملفوفة في .() وهذه الحاوية عادة ما توضع في صلب عنصر التطبيق.

وضع ملاح (ستاك)

ويدير الملاح الراكب مجموعة من الشاشات التي كانت في البداية، ويستخدم المحركات الانتقالية للمنبر الأصلي واللفتات التي تم اتخاذها بالفشل.

أولا، الوحدات اللازمة للاستيراد:

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

إنشاء ملاح متحرك متصدع

const Stack = createNativeStackNavigator();

حددوا الملاح داخل عنصر تطبيقكم

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

ويشترط كل [العاملة في الملاحة] و [مكون رد الفعل لـه.

إنشاء الكرينات والملاحة

(ب) المقاييس هي مكونات رد الفعل المعيارية، وتتلقى دعايتين هامتين هما: و.() ويوفّر الجسم ] أساليب للتحرك بين الشاشات.

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

ولا تحتاج شاشة التفاصيل إلى استخدام دعامة الملاحة إلا إذا كان يتعين عليها أن تبحر أكثر.

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

طرق الملاحة

React Navigation provides several methods via the prop:

• navigate(name, params) - تنتقل إلى الشاشة، وتعيد استخدام حالة قائمة إذا كانت موجودة في كومة الطعام.
• push(name, params) - دائماً ما يدفع شاشة جديدة إلى كومة، حتى لو كانت نفس الشاشة موجودة بالفعل في كومة الطعام.
• goBacklock] - navigates to the previous screen in the stack.
• replace(name, params) - يستعاض عن الشاشة الحالية بشاشة جديدة، تزيل التيار من التاريخ.
• reset(state)] - resets the entire navigation state to a given state object.

على سبيل المثال، لدفع حالة جديدة من شاشات التفاصيل ومعايير المرور:

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

مقاييس المرور بين أجهزة الاستشعار

ويمكن نقل البيانات إلى شاشة عن طريق الحجة الثانية إلى أو .() وتستفيد من هذه البارامترات .

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

(ب) وضع قيم البارامترات الافتراضية باستخدام على عنصر الشاشة:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

خيارات الملاحة

ويمكن لكل شاشة أن تصمم مقياساً لرأسها، أو أيقونة من الطين، أو علامة درج، إلخ، باستخدام الدعامة على أو التي تروج للملاحة.

التلقيح الرأسي

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

ويمكن تحديد خيارات الديناميكية باستخدام وظيفة تتلقى :

options={({ route }) => ({ title: route.params.name })}

Tab Navigator

والملاحة من النوع الشائع بالنسبة لأقسام التطبيقات الرفيعة المستوى، وتركيب الملاح من أسفل التابس:

npm install @react-navigation/bottom-tabs

اصنعوا ملاحاً و تجمعوا بينه وبين كومتكم

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

يمكنك أن تكتشفي ملاح التافه داخل ملاحٍ مُتعاطٍ أو العكس، و تُستخدمي أجهزة التفاح باستخدام

Drawer Navigator

ملاح درج ينزلق درج من اليسار، يكشف عن مواد الملاحة، ضعه:

npm install @react-navigation/drawer

تركيبة الإكرامبي:

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

const Drawer = createDrawerNavigator();

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

Use to open and close the drawer programmatically.

الملاحون المقاتلون المخلصون

فعمليات النقل المركب غالبا ما تكون نافايغاتور (مثلاً، ملاحاً من الطين داخل ملاحٍ متنقل) - يُعالج التصريف الملاحي بدافع الارتياح، ويمكن للوائح التي تقدم لأي شاشة أن تُطلق على وسائل الاتصال بالوالدين إذا لزم الأمر.

مثال: كومة تحتوي على ملاحٍ وقنواتٍ وشاشةٍ للسيارات:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

الربط وربطه العميق

React Navigation supports deep linking to handle URLs that open specific screens. Configure the prop on :

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

إذاً، عالجوا المُعادنات القادمة، هذا يمكّن من سمات مثل الإخطارات بالضغط التي تربط بشاشة محددة.

تدفقات التوثيق

ويتطلب العديد من التطبيقات الملاحة المشروطة على أساس دولة التوثيق، ومن النمط المشترك تحويل الملاح إلى المستوى الجذري:

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

وكبديل لذلك، استخدم كومة واحدة مع شاشات مشروطة، تجنباً للارتطام بالتعهد أو تنبيه الدولة حتى الآن.

الأداء وأفضل الممارسات

• Use native stack navigator (not ) for better performance and native transitions.
• تقليل عدد الشاشات التي تم تركيبها في الحال، واستعادة الشاشات المخفية للناجين من المناورة عن طريق التخريب عن الملاحين الساكنين،
• لا تُعطي سوى بيانات بدائية من خلال معايير لتجنب قضايا التسلسل.
• Use or ] for screen components that re-render often.
• تجنب الحوسبة الثقيلة أثناء عمليات الانتقال إلى الملاحة؛ العمل في الحمولة مع .
• (د) التعامل دائماً مع حدث للتغييرات غير المنسّقة التي تُحدث.

خاتمة

React Navigation provides an intuitive, customizable, and performant way to manage navigation in React Native apps. By mastering stack, tab, drawer, and nested navigators, along with parameter passing, deep linking, and authentication flows, you can build robust mobile experiences. For further details, refer to the [FactT:0] Official ReactT