Expo Router：React Native 文件路由新范式

# Expo Router：React Native 文件路由新范式 ## 文件系统路由 Expo Router 借鉴了 Next.js 的文件路由设计，在 React Native 中实现了约定式路由。 ``` app/ _layout.tsx # 根 Layout index.tsx # / (首页) about.tsx # /about (tabs)/ _layout.tsx # Tab 导航 Layout home.tsx # /home profile.tsx # /profile settings.tsx # /settings blog/ _layout.tsx # 嵌套 Layout index.tsx # /blog [slug].tsx # /blog/:slug (动态路由) (auth)/ login.tsx # /login register.tsx # /register ``` ## Tab Layout 配置 ```tsx // app/(tabs)/_layout.tsx import { Tabs } from 'expo-router' import { Ionicons } from '@expo/vector-icons' export default function TabLayout() { return ( ( ) }} /> ( ) }} /> ) } ``` ## 动态路由与参数 ```tsx // app/blog/[slug].tsx import { useLocalSearchParams, Stack } from 'expo-router' import { View, Text, ScrollView } from 'react-native' export default function BlogPost() { const { slug } = useLocalSearchParams() const { data, isLoading } = useQuery({ queryKey: ['post', slug], queryFn: () => fetchPost(slug) }) return ( {data?.title} {data?.content} ) } ``` ## 类型安全导航 ```tsx import { Link, router } from 'expo-router' // 声明式导航 Read Post // 编程式导航 router.push('/blog/hello-world') router.replace('/login') router.back() // 带参数 router.push({ pathname: '/blog/[slug]', params: { slug: 'my-post' } }) ``` Expo Router 让 React Native 的路由管理变得和 Web 开发一样直观，配合 Expo 的 Universal Links 支持可以实现无缝的深度链接体验。