Hengshuai's blog

Appearance

ReactNative路由导航 ​

React Native开发中，路由导航是应用架构的核心。Expo框架推出的 Expo Router 颠覆了传统方案，它基于文件系统自动生成路由，集成 React Navigation 的底层能力，同时提供零配置的开发体验。其优势包括：

  • ✅ 基于文件路径的路由：目录结构即路由映射，减少样板代码
  • ✅ 完整的TypeScript支持：类型安全的导航参数传递
  • ✅ 深度链接无缝集成：自动处理URL解析与路由匹配
  • ✅ 跨平台一致性：iOS/Android/Web统一导航逻辑

文件路径路由 ​

Expo Router和Next、Nuxt类似，也是通过目录结构进行路由映射。这种设计的好处可以大大简化开发流程，所见即所得

基本结构 ​

sh
app/
  ├── (tabs)/          # 嵌套路由组
  │   ├── index.tsx     # 路径: /tabs
  │   ├── home.tsx      # 路径: /tabs/home
  │   ├── _layout.tsx   # tabs路由组布局
  ├── setting.tsx       # 路径：/setting
  ├── detail/[id].tsx   # 动态路由：/detail/123
  ├── _layout.tsx       # 根布局配置

这里简单模拟了一个应用路由，通过注释可以简单的了解到对应的路由路径是如何映射的

静态路由 ​

创建app/setting.tsx文件自动注册/setting路由

动态路由 ​

创建app/detail/[id].tsx文件，[]包括的文件则是动态路由，[id]包围的为参数名

如访问/detail/123，在页面中就可以拿到当前的路由参数id=123

路由布局 ​

以_layout.tsx命名的文件为作为当前路由下的布局内容，如下结构：

sh
app/
  ├── user/
  │   ├── index.tsx
  │   ├── _layout.tsx  #user布局
  ├── setting.tsx
  ├── _layout.tsx  #根布局

布局内容通常可以将路由进行配置，添加公共的布局等等，如根布局

jsx
export default function RootLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
    ...FontAwesome.font,
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) return null;

  return <RootLayoutNav />;
}

function RootLayoutNav() {
  const colorScheme = useColorScheme();

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
        <Stack.Screen name="user" options={{ headerShown: false }} />
      </Stack>
    </ThemeProvider>
  );
}

根布局在路由加载时加载了必要的字体文件，并且在根路由上对相关路由进行配置，也添加了ThemeProvider方便所有的子路由使用上下文信息

当有嵌套路由时同样可以创建当前路由的布局文件_layout.tsx

jsx
export default function UserLayout() {
  return (
    <View style={{ height: 100, backgroundColor: "salmon" }}>
      <Text>顶部</Text>

      <Stack />
    </View>
  );
}

组合路由 ​

以()包围的路由名为组合路由，如下方(user)就为组合路由

sh
app/
  ├── (user)/
  │   ├── index.tsx
  │   ├── detail.tsx
  │   ├── _layout.tsx

组合路由(user)不会在路由路径中显示，当访问/index、/detail时将访问对应的(user)/index.tsx和(user)/detail.tsx文件

组合路由的作用就是可以对路由进行分类，做一些公共相关配置、或者布局，如当前user级别的路由需要展示公共的头部信息，那么可以简单这么写

jsx
export default function UserLayout() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ height: 100, backgroundColor: "salmon" }}>
        <Text
          style={{
            textAlign: "center",
            lineHeight: 100,
            textDecorationLine: "underline",
            fontSize: 22,
          }}
        >
          顶部
        </Text>
      </View>

      <View style={{ flex: 1, backgroundColor: "#999" }}>
        {/*这里将会是子路由显示区域*/}
        <Stack
          screenOptions={{
            title: "用户",
            headerShown: false,
          }}
        />
      </View>
    </SafeAreaView>
  );
}

那么user级别的页面将会呈现这样效果：

stack路由 ​

stack路由时应用程序导航的默认行为，导航以堆栈的形式进行屏幕切换

jsx
import { Stack } from "expo-router";

export default function StackLayout() {
  return (
    <Stack screenOptions={{
      headerShown: false,
      // 定义Stack的一些公共配置，如：头部怎么显示、左侧区域、右侧区域等等
    }}>
      {/* 定义某个具体Screen的行为，优先级高于Stack */}
      <Stack.Screen name="user" options={{ headerShown: false }} />
    </Stack>
  );
}

stack路由布局下每个页面都是一个完成的页面，独占一个屏幕。你可以通过Stack.Screen定制某个具体页面的显示行为，不注册的会自动以默认的Stack行为注册

tab路由 ​

tab路由顾名思义就是以tab导航器的形式展示几个页面，常见的有底部tab栏、顶部tab栏等等

jsx
import { Link, Tabs } from "expo-router";

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
        // 定义tab的公共行为
      }}
    >
      {/* 单独定制 index tab的显示行为 */}
      {/* 如：标题、右侧区域等等 */}
      <Tabs.Screen
        name="index"
        options={{
          title: "Tab One",
          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
          headerRight: () => (
            <Link href="/modal" asChild>
              <Pressable>
                {({ pressed }) => (
                  <FontAwesome
                    name="info-circle"
                    size={25}
                    color={Colors[colorScheme ?? "light"].text}
                    style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
                  />
                )}
              </Pressable>
            </Link>
          ),
        }}
      />

      {/* 其他不定制的会自动以默认tab的形式注册 */}
    </Tabs>
  );
}

定义tab布局的路由后，会自动将当前路径下的所有文件以tab的形式注册

特殊路由 ​

以 + 开头的路由对Expo Router有特殊的意义，有特定的用途

  1. +not-found：它捕获任何与应用中的路由不匹配的请求
jsx
export default function NotFoundScreen() {
  return (
    <>
      <Stack.Screen options={{ title: 'Oops!' }} />
      <View style={styles.container}>
        <Text style={styles.title}>This screen doesn't exist.</Text>

        <Link href="/" style={styles.link}>
          <Text style={styles.linkText}>Go to home screen!</Text>
        </Link>
      </View>
    </>
  );
}
  1. +html：用于自定义应用在web上使用的html样板
jsx
export default function Root({ children }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

        <ScrollViewStyleReset />
        {/* 自定义头部等等... */}
      </head>
      <body>{children}</body>
    </html>
  );
}
  1. +native-intent：用于处理应用中与特定路由不匹配的深层链接，比如由第三方服务生成的链接
jsx
import ThirdPartyService from 'third-party-sdk';

export function redirectSystemPath({ path, initial }) {
  try {
    if (initial) {
      // Detection of third-party URLs will change based on the provider
      if (url.hostname === '<third-party-provider-hostname>') {
        return ThirdPartyService.processReferringUrl(url).catch(() => {
          // Something went wrong
          return '/unexpected-error';
        });
      }
      return path;
    }
    return path;
  } catch {
    return '/unexpected-error';
  }
}

其他 ​

除了上面介绍的Stack、Tab风格的路由外，还有Modal、Drawer等几种常见的路由功能，感兴趣的可以参考官方文档

路由跳转 ​

项目中基于文件的路由注册好后，就需要在不同页面间进行导航了，怎么跳转？以什么形式跳转?

在Expo Router中链接到页面的典型方式是使用像web应用程序一样的链接。Expo Router有一个Link组件，用于在页面之间导航，其中的href属性可以直接定义目标路径

jsx
<Link href="/user">用户</Link>

默认情况下，Link只能包含文本组件。你可以在带有 asChild 属性的链接中使用Pressable或其他支持onPress和onClick`属性的组件

jsx
<Link href="/user" asChild>
  <Pressable>
    <Text>Home</Text>
  </Pressable>
</Link>

除了直接传字符串路由外，也可以通过对象属性的形式传递。如这里通过路由名字和路由参数信息导航到动态路由

jsx
<Link
  href={{
    pathname: '/user/[id]',
    params: { id: 'bacon' }
  }}
>
  View user (id in params in href)
</Link>

Redirect ​

redirect组件用来重定向页面路径的，常见的场景是不符合某个条件时重定向到其他页面，如：没有登录时

jsx
export default function UserDetail() {
  if (!isLogin) return <Redirect href="/login" />;

  return <View>User Detail</View>
}

hooks ​

除了使用提供的组件外，最简单的方式就是一些hooks了。就像在React导航中一样，你可以从onPress处理程序中调用一个函数来导航到另一个页面。在Expo Router中，你可以使用useRouter钩子来访问导航函数

jsx
import { useRouter } from 'expo-router';

export default function Home() {
  const router = useRouter();

  return <Button onPress={() => router.navigate('/about')}>
    Go to About
  </Button>;
}

除此之外，还提供了push、replace、back等等方法，点及 useRouter 查看更多使用信息

对于动态路由可以通过useLocalSearchParams获取路由参数

js
const { id, limit } = useLocalSearchParams();

深度链接是指URL打开应用中的特定页面。在这个过程中，用户不仅被引导打开你的应用程序，而且他们被带到应用程序中的特定屏幕，这对于分享应用程序中特定页面的链接尤其有用

如何使用DeepLink，推荐使用Expo提供的方式，如果使用Expo直接在app.json中配置：

json
{
  "expo": {
    "scheme": "lucky"
  }
}

scheme用于标识当前应用的唯一标识符，就类似与web的domain，因此这个是唯一的，如果和其他app重复了，那么在app中打开时可能就会出现问题

只需要配置这个现在就可以使用了，重新运行app

那么如何测试DeepLink配置正确呢？

  • 一种方式就是打包后通过安装app进行测试，这种就接近真实环境，但是比较麻烦
  • 另一种就是通过ExpoGo

为了测试的便捷，推荐使用ExpoGo直接测试

  1. uri-scheme终端脚本测试
sh
npx uri-scheme open exp://192.168.3.23:8081/--/user/detail --ios
› iOS: Opening URI "exp://192.168.3.23:8081/--/user/detail" in simulator

默认情况下Expo的Scheme为exp://127.0.0.1:8081，你可以将其换为自己环境ip，然后拼接/--/路径，去除掉自己的设置的scheme

如果测试没有问题，模拟器将会自动打开测试的页面

  1. 通过web a标签跳转
html
<a href="exp://192.168.3.23:8081/--/user/detail">跳转到App用户详情页</a>

来看看效果

总结 ​

React Native路由核心相关的知识就这么多，当然还有一些其他的功能，就不多说了，读者讲这些多加练习其他看看文档就没问题了

感谢支持

再次感谢您的支持，您的支持将鼓励我继续创作。文章通常首发公众号，可以关注我的公众号，获取最新优质文章；同时如果你有 珠宝首饰之类 的需求，也可以微信扫码光临小店，种类多多欢迎来选👏🏻
大卫talk
 
aphrodite-u

若您在阅读过程中发现一些错误：如语句不通、文字、逻辑等错误，可以在评论区指出，我会及时调整修改，感谢您的阅读。同时您觉得这篇文章对您有帮助的话，可以打赏作者一笔作为鼓励，金额不限，感谢支持🤝。
支付宝捐赠   微信支付捐赠

Released under the MIT License.

Copyright © 2018-2025 HengShuai