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