React 导航：如何调试

Question

我有一个应用程序，我配置了多条路线，一切都工作正常，直到我配置的最新路线不起作用（显示错误的屏幕）。

我的问题是如何进行调试？没有打印错误日志，我找不到如何获取有关所发生情况的更多日志。我也不知道在哪里停止调试器来获取一些有用的信息。

Answer 1

在哪里登录

您可以使用这 2 个侦听器来记录某些内容：

willFocus

- 屏幕将聚焦

componentDidMount() {
  this.props.navigation.addListener("willFocus", () => console.log(""));
}

willBlur

- 屏幕将失去焦点

componentDidMount() {
  this.props.navigation.addListener("willBlur", () => console.log(""));
}

另外，请查看 文档 以了解更多听众。

要记录什么

获取事件发生时

navigator

的状态：

let state = this.props.navigation.dangerouslyGetState();

从这里，您可以通过

state.routeNames

查看可用路线。您还可以使用

goBack

查看当前导航堆栈（用于执行

state.routes

等操作的所有导航事件的历史记录）。

Answer 2

实际上，这段代码被放置在自定义 RouteService 中，但可以用作独立的调试器...

// App.tsx
...
import { createNavigationContainerRef } from '@react-navigation/native';

if (__DEV__) {
  createNavigationContainerRef().addListener('state', ({ data }) => {
    const deeper = (rootState: any) => {
      const { routes = [], index = 0 } = rootState?.state || rootState || {};
      const state = routes[index];
      if (state) deeper(state);
      else console.log(`Screen: "${rootState?.name || ''}"`);
    };
    deeper(data.state);
  });
}

...