التنقل بين الشاشات في React Native

تتكون تطبيقات الهاتف المحمول نادرًا من شاشة واحدة فقط، إذ يدير ما يُعرَف بالمتنقّل navigator عرض شاشاتٍ متعدّدة ويحوّل بينها.

يغطّي هذا الدليل مكونات التنقّل المتوفرة في React Native. إذا كان مفهوم التنقّل جديدًا عليك، فيُفضَّل أن تستخدم مكتبة React Navigation التي توفّر حلًا سهل الاستخدام للتنقّل بين الشاشات، مع القدرة على استخدام نمطَي التنقل المُكدَّس stack navigation والتنقل المبوَّب tabbed navigation الشائعين على كل من نظامي التشغيل iOS و Android.

إذا أردت مظهرًا وإحساسًا أصيلًا على كل من نظامي التشغيل iOS و Android، أو إذا كنت بصدد دمج React Native مع تطبيق أصيل يدير التنقّل بالفعل، فمكتبة react-native-navigation توفر لك تنقّلًا أصيلًا على كلٍ من النظامين.

مكتبة React Navigation

الحل الذي يتبنّاه مجتمع المطورين هو مكتبةٌ قائمة بذاتها تسمح للمطورين بإعداد شاشات التطبيق باستخدام بضعة أسطر من الشيفرة.

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

يجب أولًا تثبيت هذه المكتبة في مشروعك:

npm install @react-navigation/native @react-navigation/native-stack

ثم ثبّت اعتماديات الأنداد peer dependencies المطلوبة. تحتاج إلى تشغيل أوامر مختلفة اعتمادًا على ما إذا كان مشروعك عبارة عن مشروع يديره Expo أو مشروع React Native صِرف.

إذا كان لديك مشروع يديره Expo، فثبّت الاعتماديات باستخدام أمر expo التالي:

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

إذا كان لديك مشروع React Native صِرف، فثبّت الاعتماديات باستخدام أمر npm التالي:

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

تأكّد من تثبيت Cocoapods بالنسبة لنظام iOS مع مشروع React Native الصِرف، ثم ثبّت ملفات pod لإكمال التثبيت:

cd ios
pod install
cd ..

ملاحظة: قد تتلقّى تحذيرات تتعلّق باعتماديات الأنداد بعد التثبيت، التي تكون عادةً ناتجة عن نطاقات إصدارات غير صحيحة محدَّدة في بعض الحزم. يمكنك تجاهل معظم التحذيرات بأمان طالما أن تطبيقك يعمل بنجاح.

أضِف السطر التالي في الجزء العلوي (تأكد من أنه في الجزء العلوي ولا يوجد شيء آخر قبله) من ملف الإدخال مثل الملف index.js أو App.js لإنهاء تثبيت معالج الإيماءات react-native-gesture-handler:

import 'react-native-gesture-handler';

يجب الآن تغليف التطبيق بأكمله في NavigationContainer، حيث تطبّق ذلك في ملف الإدخال الخاص بك مثل الملف index.js أو App.js:

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

const App = () => {
  return (
    <NavigationContainer>
      {/* بقية شيفرة تطبيقك */}
    </NavigationContainer>
  );
};

export default App;

يمكنك الآن بناء وتشغيل تطبيقك على محاكٍ أو على جهاز فعلي.

الاستخدام

يمكنك بعد ذلك إنشاء تطبيقٍ يتألف من شاشة رئيسية home وشاشة ملف تعريفي profile كالتالي:

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

const Stack = createNativeStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Welcome' }}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

هناك شاشتان في هذا المثال (الصفحة الرئيسية Home والملف التعريفي Profile) جرى تعريفهما باستخدام المكوّن Stack.Screen، وهكذا يمكنك تعريف أي عدد تريده من الشاشات.

يمكنك ضبط خيارات مثل عنوان كل شاشة في الخاصية options التابعة للمكوّن Stack.Screen.

تأخذ كل شاشة خاصية مكوّن component وهي أيضًا من مكونات React. تتلقّى هذه المكونات خاصية تسمى التنقل navigation التي لها توابع مختلفة للربط بشاشات أخرى، إذ يمكنك استخدام التابع navigation.navigate مثلًا للذهاب إلى الشاشة Profile:

const HomeScreen = ({ navigation }) => {
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', { name: 'Jane' })
      }
    />
  );
};
const ProfileScreen = ({ navigation, route }) => {
  return <Text>This is {route.params.name}'s profile</Text>;
};

يستخدم المُتنقِّل native-stack الواجهة البرمجية الأصيلة UINavigationController على نظام iOS والواجهة البرمجية الأصيلة Fragment على نظام Android لذا سيسلك المنتقل المبني مع createNativeStackNavigator السلوك النفسه ويملك سمات الأداء نفسه الذي يكون لدى تطبيق أصيل مبني باستعمال هاتين الواجهتين.

تحتوي المكتبة React Navigation أيضًا على حزم لأنواع مختلفة من المتنقّلات navigators مثل التبويبات tabs والسحب drawer، التي يمكنك استخدامها لتطبيق أنماط مختلفة في تطبيقك.

اتبع دليل بدء استخدام مكتبة React Navigation الأجنبي للاطّلاع على مقدمة كاملة عنها.

مصادر

• صفحة Navigating Between Screens في توثيق React Native الرسمي.