【React Native】路由跳转

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",
  },
  });