如何在React Navigation Stack中读取完整栈路由信息？

当然可以读取栈的路由信息！React Navigation并没有提供navigation.ReadStack()这种方法，但它有两个更实用的方式来获取你需要的栈路由结构。

方法1：使用useNavigationState钩子 #

这个钩子是React Navigation专门用来获取导航状态的，但要注意它必须在组件的顶层作用域中调用，不能放在嵌套函数（比如你写的Pokus函数）里，否则会违反React Hooks的规则。

你可以把它移到Main组件的顶层，然后在需要的地方使用：

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { last_activity_token, UpdateActivity } from '../Models/activityModel';
import {useNavigationState} from '@react-navigation/native';

export default function Main({ navigation }) {
  const [activity, setActivity] = useState(new last_activity_token());
  // 将useNavigationState移到组件顶层
  const navigationState = useNavigationState(state => state);

  const Pokus = () => {
    // 转换为你想要的结构
    const formattedRoutes = navigationState.routes.map((route, index) => ({
      name: route.name,
      index: index
    }));
    alert(JSON.stringify(formattedRoutes));
  }
  
  React.useEffect(() => {
    activity.page.name = "Main";
    UpdateActivity(activity);
  }, []); // 建议添加空依赖数组，避免组件重复渲染时无限触发
  
  return (
    <View style={styles.layout}>
      <Text>Main</Text>
      <View style={styles.MainContent}>
        <Text>Tady se to vše bude odehrávat</Text>
        <Button title="查看路由栈" onPress={Pokus}/>
      </View>
    </View>
  );
}

// 样式部分保持不变
const styles = StyleSheet.create({
  layout: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  MainContent: { marginTop: 20 }
});

方法2：使用navigation.getState()方法 #

如果你只是想在某个事件（比如按钮点击）中一次性获取路由栈信息，直接用navigation.getState()会更简单，不需要依赖钩子：

const Pokus = () => {
  const state = navigation.getState();
  const formattedRoutes = state.routes.map((route, index) => ({
    name: route.name,
    index: index
  }));
  alert(JSON.stringify(formattedRoutes));
}

这个方法可以直接在嵌套函数或事件处理程序中使用，灵活度更高。

关于返回的结构细节 #

不管用哪种方法，state.routes就是当前栈中所有路由的数组，每个路由对象包含你在Stack.Screen中定义的name、唯一标识key等属性。通过map转换后，就能得到你想要的[{ name: "Home", index: 0 }, { name: "Main", index: 1 }]这种结构。

另外补充一个小建议：你的useEffect没有设置依赖数组，会导致组件每次渲染都触发UpdateActivity，加上空数组[]可以让它只在组件挂载时执行一次。

内容的提问来源于stack exchange，提问作者Andrew Black