مسیریابی بومی با روتر Expo دوباره طراحی شده است

مسیرهای URL خود را حتی در برنامه های تلفن همراه با استفاده از کتابخانه Expo Router پاک کنید.

مسیریابی مبتنی بر فایل یک تکنیک رایج توسعه وب است که مسیر URL را به یک فایل خاص در فهرست پروژه ترسیم می کند. این سیستم از پیکربندی های مسیریابی پیچیده درگیر در ساخت سیستم های ناوبری اجتناب می کند.

با انتشار کتابخانه Expo Router، مسیریابی مبتنی بر فایل با برنامه های React Native امکان پذیر است. Expo Router می تواند سیستم ناوبری بهتری برای توسعه دهندگان React Native باشد که با Expo کار می کنند.

ناوبری دوباره با روتر Expo

روتر expo یک راه حل مسیریابی اعلامی برای برنامه های React Native Expo ارائه می دهد. این سیستم به طور قابل توجهی با نحوه ایجاد یک سیستم ناوبری با استفاده از React Navigation متفاوت است. Expo Router نگرانی های عمده ای را در مورد استفاده از سیستم ناوبری فعلی فعال می کند.

این مسائل شامل داشتن یک سیستم ناوبری که در همه جا به طور مداوم کار نمی کند، مشکلات در مدیریت پیوند عمیق و همچنین تنظیمات پیچیده برای انتقال ناوبری سفارشی است.

پیمایش/مسیریابی مبتنی بر فایل روتر expo یک سیستم ساده است که به خوبی کار می کند و از قبل در میان توسعه دهندگان جاوا اسکریپت و چارچوب های جاوا اسکریپت مانند Next.js آشنا است، جایی که می توانید مسیرها را تعریف کنید.

نصب و راه اندازی روتر Expo

انتقال پروژه Expo از سیستم ناوبری قدیمی به استفاده از روتر Expo بسیار ساده است.

مرحله 1: روتر Expo را نصب کنید

از این دستور ترمینال برای اجرای نصب کننده expo-router استفاده کنید:

npx expo install expo-router

همچنین باید مطمئن شوید که این وابستگی‌های همتا را نصب کرده‌اید:

• react-native-safe-area-context
• react-native-screens
• پیوند نمایشگاهی
• expo-status-bar
• react-native-gesture-handler

اگر موردی وجود ندارد، می توانید آنها را با اجرای:

npx expo install <dependency-name>

مرحله 2: نقطه ورودی را به روز کنید

یک فایل index.js جدید برای جایگزینی نقطه ورودی App.js موجود خود ایجاد کنید و index.js را به عنوان نقطه ورود برنامه در داخل app.json قرار دهید:

// Set index.js as entry point
{
  "main": "index.js"
}

// Import the following inside index.js
import "expo-router/entry";

مرحله 3: یک طرح پیوند عمیق را تعریف کنید

Expo Router از یک طرح پیوند عمیق برای تعیین صفحه یا محتوایی که هنگام مسیریابی باز شود استفاده می کند.

با افزودن ویژگی scheme به app.json، یک طرح پیوند عمیق برای برنامه خود تعریف کنید:

{
  "expo": {
    "scheme": "myapp"
  }
}

مرحله 4: پیکربندی نهایی

آخرین مرحله این است که باندلر مترو برنامه Expo خود را تنظیم کنید و Babel را برای پشتیبانی از Expo Router در برنامه خود پیکربندی کنید.

داخل babel.config.js کد موجود را به شکل زیر تغییر دهید:

module.exports = function (api) {
  api.cache(true);

  return {
    presets: ["babel-preset-expo"],
    plugins: [
      require.resolve("expo-router/babel"),
      /* */
    ],
  };
};

اکنون برنامه خود را با اجرای زیر بازسازی و راه اندازی کنید:

npx expo –clear

ساخت مسیرهای برنامه خود با روتر Expo

می توانید شروع به تنظیم یک جریان ناوبری در پوشه برنامه کنید. فایل index.js نقطه شروع شماست. Expo Router مسیر هر فایلی را که در داخل برنامه ایجاد می کنید به سیستم مسیر برنامه با پیوندهای عمیق URL برای مطابقت با هر صفحه اضافه می کند.

به عنوان مثال، یک فایل SecondScreen.js در دایرکتوری برنامه ایجاد کنید و یک جزء پیش فرض را صادر کنید:

import { StyleSheet, Text, View } from "react-native";
import React from "react";

const SecondScreen = () => {
  return (
    <View style={styles.container}>
      <View style={styles.textStyle}>
        <Text>Second Screen</Text>
      </View>
    </View>
  );
};

export default SecondScreen;

const styles = StyleSheet.create({});

می توانید با استفاده از متد ()useRouter به این صفحه از index.js بروید:

import { useRouter } from "expo-router";

export default function Page() {
  const navigation = useRouter();

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello World</Text>
      <Text style={styles.subtitle}>This is the first page of your app.</Text>

      <Button
        title="Navigate to SecondScreen"
        onPress={() => {
          navigation.push("/SecondScreen");
        }}
      />
    </View>
  );
}

در اینجا شما روتر را به ناوبری اختصاص می دهید و با فراخوانی navigation.push(“/second”) از آن در داخل عنصر Button استفاده می کنید. آرگومان درون فشار، مسیر فایل صفحه‌ای است که می‌خواهید به آن بروید.

در داخل SecondScreen نیز می توانید به صفحه فهرست مانند زیر بروید:

import { Link } from "expo-router";

const SecondScreen = () => {
  return (
    <View style={styles.container}>
      <View style={styles.textStyle}>
        <Text>Second Screen</Text>

        <Link href="/" asChild>
          <TouchableOpacity>
            <Text>Navigate to index.js</Text>
          </TouchableOpacity>
        </Link>
      </View>
    </View>
  );
};

عنصر پیوند برای تعیین مسیر از یک پراپ href استفاده می کند. در داخل برنامه، مسیر “/” مربوط به فایل ورودی (index.js) است. تکیه گاه دوم asChild است. این prop به شما امکان می دهد به جای کامپوننت لینک پیش فرض، کامپوننت فرزند اول را با تمام اجزای مشخص شده رندر کنید. می توانید از این برای سفارشی کردن ظاهر مولفه Link یا پیاده سازی منطق مسیریابی سفارشی استفاده کنید.

تعریف مسیرهای پویا

با مسیرهای پویا، می توانید مسیرها را به صورت پویا بر اساس پارامترها یا داده های خاص ایجاد کنید. به جای تعریف یک مجموعه ثابت از مسیرها، انعطاف پذیری و سازگاری را در مسیریابی برنامه خود به دست می آورید.

برای شروع استفاده از مسیرهای پویا در Expo Router، باید مسیرهایی را برای مدیریت محتوای پویا تعریف کنید. شما می توانید با تعیین متغیرهایی در مسیر مسیر از مسیرهای پارامتری شده استفاده کنید. هنگامی که شخصی به مسیر شما می‌رود، مقادیر این مکان‌نماها در دسترس خواهد بود.

به عنوان مثال، یک برنامه وبلاگ نویسی را در نظر بگیرید که می خواهید پست های وبلاگ فردی را در آن نمایش دهید. شما می توانید یک مسیر پویا برای مدیریت هر یک از پست های وبلاگ تعریف کنید:

// app/routes/BlogPost.js
import React from "react";
import { useRouter } from "expo-router";

const BlogPost = ({ route }) => {
  const { postId } = route.params;

  return (
    <View>
      <Text>Displaying Blog Post with ID: {postId}</Text>
    </View>
  );
};

export default BlogPost;

در این مثال، شما یک جزء مسیر پویا به نام BlogPost تعریف می کنید. شی route.params به شما امکان می دهد به مقادیر پارامترهای ارسال شده به مسیر دسترسی داشته باشید. در این حالت، شما به یک پارامتر postId برای نمایش پست وبلاگ مربوطه دسترسی دارید.

ایجاد مسیرهای پویا

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

در اینجا یک مثال است:

// app/components/BlogList.js
import React from "react";
import { useNavigation } from "expo-router";

const BlogList = ({ blogPosts }) => {
  const navigation = useNavigation();

  const navigateToBlogPost = (postId) => {
    navigation.navigate("BlogPost", { postId });
  };

  return (
    <View>
      {blogPosts.map((post) => (
        <TouchableOpacity
          key={post.id}
          onPress={() => navigateToBlogPost(post.id)}
        >
          <Text>{post.title}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default BlogList;

در این مثال، شما روی آرایه blogPosts تکرار می‌کنید و یک مؤلفه را برای هر پست ارائه می‌دهید. وقتی یک پست را فشار می دهید، تابع navigateToBlogPost اجرا می شود و postId را به مسیر ناوبری ارسال می کند.

مدیریت مسیرهای پویا

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

مثلا:

// app/routes/BlogPost.js
import React from "react";
import { Route, useFocusEffect } from "expo-router";

const BlogPost = ({ route }) => {
  const { postId } = route.params;

  useFocusEffect(() => {
    // Fetch blog post data based on postId
    // Perform any other necessary actions on focus
  });

  return (
    <View>
      <Text>Displaying Blog Post with ID: {postId}</Text>
    </View>
  );
};

export default BlogPost;

در این مثال، قلاب useFocusEffect به رویدادهای تمرکز ویژه مولفه BlogPost گوش می دهد. در داخل تماس، می‌توانید داده‌های اضافی را دریافت کنید، اقداماتی را انجام دهید یا صفحه را بر اساس پست وبلاگ متمرکز شده به‌روزرسانی کنید.

پیمایش با مسیرهای پویا

برای پیمایش به یک مسیر پویا، می توانید از روش های ناوبری ارائه شده توسط Expo Router استفاده کنید.

به عنوان مثال، برای پیمایش به مؤلفه پست وبلاگ با شناسه پست خاص، می توانید از روش navigation.navigate استفاده کنید:

// app/components/BlogList.js
import React from "react";
import { useNavigation } from "expo-router";

const BlogList = ({ blogPosts }) => {
  const navigation = useNavigation();

  const navigateToBlogPost = (postId) => {
    navigation.navigate("BlogPost", { postId });
  };

  return (
    <View>
      {blogPosts.map((post) => (
        <TouchableOpacity
          key={post.id}
          onPress={() => navigateToBlogPost(post.id)}
        >
          <Text>{post.title}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default BlogList;

وقتی یک پست وبلاگ را فشار می دهید، تابع navigateToBlogPost با postId فعال می شود.

روتر Expo به شما کمک می کند تا برنامه های بومی خود را ساختار دهید

روتر Expo یک راه حل عالی برای مدیریت ناوبری در برنامه های React Native شما ارائه می دهد. با تجسم مجدد تجربه مسیریابی بومی، Expo Router انعطاف پذیری و سهولت استفاده را ارائه می دهد.

شما ویژگی های Expo Router را بررسی کرده اید، به مفاهیم اساسی مسیریابی پرداخته اید و نحوه ایجاد مسیرهای پویا را کشف کرده اید. با Expo Router، می‌توانید جریان‌های ناوبری پویا ایجاد کنید، داده‌های مختلف یا ورودی کاربر را مدیریت کنید، و ناوبری را در برنامه خود شخصی کنید.

منبع مقاله