您现在的位置是：首页 >技术教程 >react native学习【9】——动态路由网站首页技术教程

1、进入终端

2、动态路由dynamic router

官方网站
视频中的举例：当我们点击待办事项，它会带我们进入一个页面——那个具体的待办事项，我们不需要为每个待办事项添加一个新的静态路由。动态是指我们可以添加一条可以处理的路线，我们要去的编辑界面，为其中任何一个给定的创建待办事项，我们将通过待办事项的ID传递给路由。

网上解释：

在软件开发中，动态路由是指在运行时根据不同的条件、参数或状态来动态地确定请求的处理路径，而不是在开发时就静态地固定好每个请求对应的处理逻辑和资源路径。以下是关于动态路由的详细介绍：

• 与静态路由的对比
  • 静态路由：在开发阶段就明确地将每个请求路径与特定的处理函数、页面或资源进行一一映射。例如，在一个简单的静态网站中，/index.html 请求总是对应首页的静态页面文件，/about.html 请求对应“关于我们”页面的文件，这种映射关系在代码部署后不会改变。
  • 动态路由：不会预先固定请求与资源的对应关系，而是根据请求中的某些动态因素来决定如何处理。比如在电商网站中，/product/:id 这样的路由，其中的 :id 是一个动态参数，不同的 id 值对应不同的商品详情页面，系统会根据实际传入的 id 值来动态地查询数据库、渲染商品详情等内容。
• 实现原理
  • 通常在后端框架或前端路由管理库中，会有一套路由匹配机制。当请求到达时，会根据预定义的路由规则（包括路径模式、参数等）来解析请求路径，提取出其中的动态部分，然后结合这些动态信息来调用相应的处理逻辑或加载对应的资源。

3、编写app/_layout.jsx布局文件

export default function RootLayout() {
   
  return (
    <ThemeProvider>
      <SafeAreaProvider>
        <Stack screenOptions={
   {
   headerShown: false}}>
          <Stack.Screen name="index"/>
          {
   /* 这将是我们的动态路线  然后有一个表示动态的文件：如果愿意的话，前往编辑待办事项的页面*/}
          <Stack.Screen name="todos/[id]"/>
        </Stack>
      </SafeAreaProvider>
    </ThemeProvider>
  );
}

4、创建动态路由

在app文件夹下面

• 创建todos文件夹
• 在创建好的文件夹中，创建[id].jsx文件
  

接下里构建一个完整的组件、完整的页，先从最基础的开始。

import {
    useLocalSearchParams } from "expo-router";
import {
    View, Text, StyleSheet, Pressable, TextInput } from "react-native";

export default function EditScreen() {
   
     
    const {
   id} = useLocalSearchParams();
    return (
        <View>
            <Text>{
   id}</Text>

        </View>
    )
}

5、完善index.jsx文件

当我们点击时，能够进入到这个动态路线页面。

const renderItem = ({
    item}) => (
    <View style={
   styles.todoItem}>
      {
   /* 
      onPress能帮助我们导航到该动态路线
      长按才能切换待办事项 */}
      <Pressable 
        onPress = {
   () => handlePress(item.id)}
        onLongPress={
   ()=>toggleTodo(item.id)}>
        <Text 
          style={
   [styles.todoText, item.completed && styles.completedText]}>
          {
   item.title}
        </Text>
      </Pressable>
      <Pressable onPress={
   ()=>removeTodo(item.id)}>
        {
   /* 复制删除图标的渲染代码并改变 */}
        <MaterialCommunityIcons name="delete-circle" size={
   36} color="red" selectable={
   undefined}/>
      </Pressable>
    </View>
  )

导入路由并定义使用

import {
    useRouter } from "expo-router";
export default function Index() {
   
    //还有其他的代码……
const router = useRouter();
     //还有其他的代码……
//  路由跳转
  const handlePress = (id) => {
   
    router.push(`/todos/${
     id}`);
    
  }
}

长按，会显示下划线；再次长按，下划线取消

点击，比如new todo，就会跳转

6、完善[id].jsx文件

添加更多需要的导入

import {
   useState, useEffect, useContext} from "react";
import {
    SafeAreaView } from "react-native-safe-area-context";
import {
    ThemeContext } from "@/context/ThemeContext";
import {
    StatusBar } from "expo-status-bar";
import {
    Inter_500Medium, useFonts } from "@expo-google-fonts/inter";
import {
    Octicons } from "@expo/vector-icons/Octicons";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {
    useRouter } from "expo-router";

完善代码主体部分

export default function EditScreen() {
   
     
    const {
   id} = useLocalSearchParams();
    const [todo, setTodo] = useState({
   });
    const router = useRouter();
    // 添加配色方案
    const {
   colorScheme, setColorScheme,theme} = useContext(ThemeContext);
    // 加载字体
    const[loaded, error] = useFonts({
   
        Inter_500Medium,
    });
    
    // 在id变化时，执行异步任务，获取存储的数据并设置状态
    useEffect(() => {
   
        const fetchData = async (id) => {
   
            try