优雅的配置`expo-router`路由

优雅的配置expo-router路由

简介

在现代移动应用开发中，路由管理是构建用户友好和高效应用的关键部分。随着应用功能的不断增加和复杂度的提升，如何优雅地组织和导航不同的屏幕成为了开发者面临的重要挑战。在这个项目中，我们引入了expo-router，这是一个基于React Navigation的强大路由库，它为我们提供了一种简洁而高效的方式来管理应用的导航逻辑。

expo-router的优势在于其简洁的API和丰富的功能集。它允许开发者轻松地定义和配置应用的路由结构，同时提供了诸如嵌套导航、屏幕过渡动画等高级特性。通过使用expo-router，我们能够将更多的精力集中在应用的业务逻辑和用户体验上，而不是在复杂的路由配置上花费过多时间。

在接下来的内容中，我们将深入探讨如何在这个项目中使用expo-router来构建一个优雅且易于维护的路由系统。我们将详细介绍expo-router的基本概念和使用方法，并展示如何通过它来实现各种常见的导航场景。

_layout.tsx相关代码

import React from "react";
import { Tabs } from "expo-router";
import { TabsScreenOptionsType } from "@/components/options.icon";
import items from "@/components/navigate.screen";

const tabScreenOption: TabsScreenOptionsType = {
  headerTitleAlign: "center",
  tabBarStyle: { height: 45 },
  tabBarLabelStyle: { fontSize: 10 },
};

const _layout = () => (
  <Tabs screenOptions={tabScreenOption}>
    {items.map((item) => (
      <Tabs.Screen name={item.name} options={item.options} key={item.name} />
    ))}
  </Tabs>
);

export default _layout;

@/components/options.icon相关代码

import { Ionicons } from "@expo/vector-icons";
import { Tabs } from "expo-router";
import { View } from "react-native";

export type TabsScreenOptionsType = React.ComponentProps<typeof Tabs>["screenOptions"];


export type TabBarIconComponentType = {
  color: string;
  name: React.ComponentProps<typeof Ionicons>["name"];
};

export const TabBarIconComponent = (prop: TabBarIconComponentType) => (
  <View style={{ marginBottom: 5 }}>
    <Ionicons size={26} style={{ marginBottom: -3 }} {...prop} />
  </View>
);

@/components/navigate.screen相关代码

import { Ionicons } from "@expo/vector-icons";
import { Tabs } from "expo-router";
import { View } from "react-native";

/**
 * TabsScreenOptionsType 是一个类型别名，用于表示 Tabs 组件的 screenOptions 属性类型。
 * 它继承自 React.ComponentProps<typeof Tabs>，这意味着它包含了 Tabs 组件的所有属性。
 * 
 * @module TabsScreenOptionsType
 * @author QingFeng
 * @date 2025-01-25
 */
export type TabsScreenOptionsType = React.ComponentProps<typeof Tabs>["screenOptions"];

/**
 * TabBarIconComponentType 是一个类型别名，用于表示自定义的 TabBar 图标组件的属性类型。
 * 它包含一个 color 属性，用于指定图标的颜色，以及一个 name 属性，用于指定 Ionicons 图标的名称。
 * 
 * @module TabBarIconComponentType
 * @author QingFeng
 * @date 2025-01-25
 */
export type TabBarIconComponentType = {
  // 图标颜色
  color: string;
  // Ionicons 图标名称
  name: React.ComponentProps<typeof Ionicons>["name"];
};

/**
 * TabBarIconComponent 是一个自定义的 React 组件，用于渲染 TabBar 图标。
 * 它接受一个 TabBarIconComponentType 类型的 prop 对象，包含图标颜色和名称。
 * 
 * @module TabBarIconComponent
 * @author QingFeng
 * @date 2025-01-25
 * @param {TabBarIconComponentType} prop - 包含图标颜色和名称的 prop 对象。
 * @returns {JSX.Element} 渲染的 TabBar 图标组件。
 */
export const TabBarIconComponent = (prop: TabBarIconComponentType) => (
  <View style={{ marginBottom: 5 }}>
    <Ionicons size={26} style={{ marginBottom: -3 }} {...prop} />
  </View>
);

@/components/options.navigation相关代码

import { Tabs } from "expo-router";

/**
 * TabsPropsType 是一个类型别名，用于表示 Tabs.Screen 组件的属性类型。
 * 它继承自 React.ComponentProps<typeof Tabs.Screen>，这意味着它包含了 Tabs.Screen 组件的所有属性。
 * 
 * @module TabsPropsType
 * @author QingFeng
 * @date 2025-01-25
 */
export type TabsPropsType = React.ComponentProps<typeof Tabs.Screen>;

/**
 * ScreenPageComponents 类用于管理一组 TabsPropsType 类型的组件。
 * 它提供了添加组件和获取所有组件的方法。
 * 
 * @module ScreenPageComponents
 * @author QingFeng
 * @date 2025-01-25
 */
export class ScreenPageComponents {
  private items: Array<TabsPropsType>;

  /**
   * 构造函数，初始化 items 数组。
   * 
   * @constructor
   * @author QingFeng
   * @date 2025-01-25
   */
  constructor() {
    this.items = new Array();
  }

  /**
   * 添加一个 TabsPropsType 类型的组件到 items 数组中。
   * 
   * @param {TabsPropsType} item - 要添加的 TabsPropsType 类型的组件。
   * @author QingFeng
   * @date 2025-01-25
   */
  add(item: TabsPropsType) {
    this.items.push(item);
  }

  /**
   * 获取当前存储的所有 TabsPropsType 类型的组件。
   * 
   * @returns {Array<TabsPropsType>} 包含所有 TabsPropsType 类型组件的数组。
   * @author QingFeng
   * @date 2025-01-25
   */
  getItems() {
    return this.items;
  }
}