Link

• 跳转的路径，就在href里写/details。
• 路径都是相对于app目录来写的，也就是说app目录就是/。
• 很多时候，需要跳转的组件比较复杂。比方说，要在里面要嵌套按钮，或者其他东西。这种情况下，就可以在Link组件里加个asChild 。

import { Link } from "expo-router";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";export default function Index() {return (<View style={styles.container}><Text style={styles.title}>这里是首页</Text><Link href="/details" style={styles.link}>跳转到详情页（Link）</Link><Link href="/details" asChild><TouchableOpacity><Text style={styles.buttonText}>跳转到详情页（Link + asChild）</Text></TouchableOpacity></Link></View>);
}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: "#fff",alignItems: "center",justifyContent: "center",},title: {fontSize: 40,fontWeight: "bold",color: "#e29447",},link: {marginTop: 20,fontSize: 20,color: "#1f99b0",},buttonText: {marginTop: 20,fontSize: 20,color: "#ff7f6f",},
});

import { Link } from "expo-router";
import { StyleSheet, Text, View } from "react-native";export default function Details() {return (<View style={styles.container}><Text style={styles.title}>这里是详情页</Text><Link href="../" style={styles.backText}>返回</Link></View>);
}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: "#fff",alignItems: "center",justifyContent: "center",},title: {fontSize: 40,fontWeight: "bold",color: "#4f9df7",},backText: {marginTop: 20,fontSize: 20,color: "#67c1b5",},
});

router

方法	作用	说明
router.navigate	跳转到指定页面，最常用。	如果目标页面已在Stack中，直接跳转到现有实例，否则新增页面到Stack。
router.replace	替换掉Stack中所有页面。	因为Stack里之前的页面都被替换了，无法返回上一页。
router.push	强制新增页面到Stack。	无论目标页面是否存在，始终在Stack里新增一个页面。
router.dismiss	关闭当前的页面，返回Stack里的上一个页面。
router.dismissAll	关闭所有中间页面，返回Stack根页面。

此外还有一些不太常用的方法：

• router.dismiss(2)，可以在dismiss里加数字，表示返回几层。
• router.dismissTo('/')，表示从当前页返回到目标页面，并关闭中间页面。

import { useRouter } from "expo-router";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";export default function Index() {const router = useRouter();return (<View style={styles.container}><Text style={styles.title}>这里是首页</Text><TouchableOpacity onPress={() => router.navigate('/details')}><Text style={styles.buttonText}>跳转（navigate ）</Text></TouchableOpacity><TouchableOpacity onPress={() => router.replace('/details')}><Text style={styles.buttonText}>替换（replace）</Text></TouchableOpacity></View>);
}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: "#fff",alignItems: "center",justifyContent: "center",},title: {fontSize: 40,fontWeight: "bold",color: "#e29447",},buttonText: {marginTop: 20,fontSize: 25,color: "#ff7f6f",},
});