نحوه پیمایش بین صفحه نمایش در برنامه React Native

استفاده از ناوبر پشته می تواند به برنامه شما کمک کند تا با حداقل کد، از یک صفحه به صفحه دیگر منتقل شود.

اغلب، هنگام ساختن یک برنامه React Native، آن را از صفحه‌های مختلف مانند Login، Home و About می‌نویسید. سپس باید مکانیزم ناوبری را پیاده سازی کنید تا کاربرانتان بتوانند برنامه را پیمایش کنند و به صفحه های جداگانه آن به ترتیب مناسب دسترسی پیدا کنند.

هدف از این آموزش این است که شما را در فرآیند راه اندازی یک سیستم ناوبری در برنامه React Native خود راهنمایی کند. این شامل نصب کتابخانه، افزودن صفحه‌های نمایش خود به ناوبر پشته، و اتصال صفحه‌ها به یکدیگر از درون هر یک از اجزای شما است.

قبل از اینکه شروع کنی

برای دنبال کردن این آموزش در رایانه محلی خود، باید موارد زیر را نصب کنید:

• Node.js نسخه 10 یا بالاتر
• Xcode یا Android Studio (برای اجرای شبیه ساز تنظیم شده است)
• React Native CLI

برای دستورالعمل های گام به گام در مورد نحوه راه اندازی محیط توسعه React Native، می توانید مستندات راه اندازی رسمی React Native را مطالعه کنید.

قبل از شروع بررسی نحوه پیاده‌سازی ناوبری در برنامه React Native، بیایید نحوه عملکرد مکانیسم ناوبری پشته در React Native را درک کنیم.

درک نحوه عملکرد ناوبری پشته

تصور کنید که برنامه React Native شما یک پشته است. در ابتدا، در آن پشته، صفحه اصلی را دارید، که اولین صفحه ای است که هنگام باز کردن برنامه نشان داده می شود.

اگر بخواهید از صفحه اصلی به صفحه About بروید، برنامه About را روی پشته فشار می‌دهد، بنابراین در بالای صفحه اصلی قرار می‌گیرد. به طور مشابه، برنامه هر صفحه جدیدی را که به آن پیمایش می کنید، به پشته فشار می دهد.

اکنون، اگر می خواهید به صفحه قبلی برگردید، برنامه صفحه فعلی شما را از پشته بیرون می آورد و صفحه زیر آن را به شما نشان می دهد. این رفتار مشابه چیزی است که وقتی روی نماد “بازگشت” در مرورگر وب خود کلیک می کنید اتفاق می افتد.

با درک روشنی از مکانیسم ناوبری پشته، اکنون زمان آن رسیده است که آن را در یک برنامه React Native تنظیم کنید.

1. React Navigation را برای Native Apps نصب کنید

برای شروع، بسته ناوبری React را برای برنامه های بومی در پروژه React Native خود با اجرای این دستور در ترمینال نصب کنید:

npm i @react-navigation/native

بسته ای که به تازگی نصب کرده اید به React Native Stack و React Native Screens برای اجرای صحیح نیاز دارد. برای نصب RN Stack، اجرا کنید:

npm i @react-navigation/native-stack

برای نصب دومی، این را اجرا کنید:

npm i react-native-screens

اکنون همه چیزهایی را که برای شروع ایجاد مکانیسم ناوبری در برنامه خود نیاز دارید، دارید. مرحله بعدی تنظیم صفحه نمایش است.

2. صفحه نمایش را در برنامه React Native خود تنظیم کنید

برای این مثال، ما فقط دو صفحه ایجاد می کنیم – صفحه اصلی و صفحه درباره.

یک پوشه با نام screens در دایرکتوری ریشه برنامه خود ایجاد کنید. پس از آن، دو فایل به نام‌های HomeScreen.js و AboutScreen.js را در داخل صفحه‌نمایش دایرکتوری ایجاد کنید.

چه چیزی به فایل HomeScreen.js خود اضافه کنید

فایل HomeScreen.js را باز کنید و با وارد کردن موارد زیر شروع کنید:

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { useState } from 'react'

سپس، مؤلفه کاربردی HomeScreen را ایجاد کنید و با استفاده از ساختارشکنی شیء (طبق بهترین روش‌های React) به شی ناوبری دسترسی پیدا کنید، سپس یک عنوان و دکمه را برای پیمایش به صفحه درباره برگردانید:

export default function HomeScreen({navigation}) { 
  return ( 
    <View style={styles.container}> 
      <Text style={styles.paragraph}> Home Screen </Text> 
      <Button 
        title="Go to About" 
        onPress={() => navigation.navigate('AboutScreen')} 
      /> 
    </View> 
  );
}

در اینجا به React Native می‌گوییم که وقتی کاربر دکمه را فشار می‌دهد، به About بروید. در این مورد، ما هیچ داده ای را به صفحه نمایش ارسال نمی کنیم. اما فرض کنید می خواهید داده ها را به تابع منتقل کنید. در اینجا این است که چگونه این کار را انجام می دهید:

export default function HomeScreen({navigation}) { 
  const data = { websiteName: "John's Tech" }

  return ( 
    <View style={styles.container}> 
      // Text goes here 
      <Button 
        title="Go to About" 
        onPress={() => navigation.navigate('AboutScreen', data)} 
      /> 
    </View> 
  );
}

حالا وقتی دکمه را فشار می دهید، این کد داده ها را به صفحه بعدی یعنی About ارسال می کند. در داخل فایل AboutScreen.js می‌توانید به داده‌های مسیر دسترسی داشته باشید و آن‌ها را در رابط کاربری نمایش دهید.

چه چیزی به فایل AboutScreen.js خود اضافه کنید

فایل AboutScreen.js را باز کنید و با وارد کردن وابستگی های زیر شروع کنید:

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

سپس، مؤلفه تابعی AboutScreen را ایجاد کنید که داده‌ها را از ویژگی route.params دریافت می‌کند و داده‌ها را در UI برمی‌گرداند:

export default function AboutScreen({route}) { 
  let dataObj = route.params

  return ( 
    <View style={styles.container}> 
      <Text style={styles.paragraph}> 
        This is the About Screen of {dataObj.websiteName} 
      </Text> 
    </View> 
  );
}

اگر به خاطر داشته باشید، ما یک ویژگی را در شی داده به نام websiteName مشخص کردیم که اکنون آن را در کامپوننت رندر می دهیم. می‌توانید به هر تعداد که می‌خواهید خصوصیات را در شی اضافه کنید و در داخل مؤلفه صفحه‌های هدف به آنها دسترسی داشته باشید.

گام بعدی این است که ناوبر پشته خود را با دو صفحه تنظیم کنید.

3. اتصال صفحه ها با Stack Navigator

در داخل App.js، با وارد کردن وابستگی‌های زیر شروع کنید:

import * as React from 'react';
import HomeScreen from './screens/HomeScreen'
import AboutScreen from './screens/AboutScreen'
import { NavigationContainer } from "@react-navigation/native"
import { createNativeStackNavigator } from "@react-navigation/native-stack"

در خطوط دو و سه، دو صفحه‌نمایش را که ایجاد کردیم وارد کردیم. سپس، NavigationContainer را وارد کردیم

از @react-navigation/native و createNativeStackNavigator از @react-navigation/native-stack برای کمک به ما در اتصال صفحه نمایش ها.

سپس، createNativeStackNavigator را برای بازیابی Stack فراخوانی کنید:

const Stack = createNativeStackNavigator()

این به ما امکان می‌دهد صفحه‌هایی را که می‌خواهید در برنامه‌تان بینشان جابه‌جا شوید، «انباشته» کنیم.

تابع جزء App را ایجاد کنید و هر دو صفحه را در مطابق شکل زیر برگردانید. مطمئن شوید که آن را در بپیچید وگرنه کار نخواهد کرد:

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

این کد صفحه HomeScreen را در بالای پشته قرار می دهد، به این معنی که برنامه ابتدا مؤلفه Home را پس از اتمام بارگیری رندر می کند.

اکنون همه چیز تنظیم شده است. می‌توانید با کلیک کردن روی دکمه Go to About در صفحه اصلی UI، برنامه را آزمایش کنید. این باید شما را به About هدایت کند و ویژگی websiteName را که در رابط کاربری نمایش داده شده است پیدا خواهید کرد:

بهترین چیز در مورد استفاده از React Navigation برای Native این است که تنظیم و استفاده از آن بسیار آسان است. این به هیچ گونه پیکربندی اضافی نیاز ندارد (علاوه بر کتابخانه های مورد نیازی که نصب کرده اید)، و همچنین می توانید انواع مختلفی از Paywalls را متصل کنید (اگر قصد دارید یک برنامه مبتنی بر اشتراک بسازید).

درباره React Native بیشتر بدانید

React Native یک چارچوب چند پلتفرمی برای ایجاد برنامه‌هایی است که روی دستگاه‌های اندروید و iOS اجرا می‌شوند. چیزهای زیادی برای یادگیری در مورد React Native وجود دارد، و اگر در استفاده از این فریم ورک تازه کار هستید، باید با یادگیری اصول اولیه شروع کنید.

منبع مقاله