react-navigation NavigationContainer v5.9.0

271 阅读1分钟

获取当前路由名称

这个官方给的示例,我按照官网然后添加输出日志,如下效果:

下面是 NavigationContainer 组件的官方文档: NavigationContainer,具体是什么意思怎么使用,以后会逐渐补全,今天先说几个已经验证过的。

props

1.1 onStateChange

当路线切换的时候会调用,但是初始状态并不是空,导致刷新的时候第一个页面的并不会调用。

函数声明:

onStateChange?: (state: NavigationState | undefined) => void;

其中回调函数的参数如下:

{
	"stale": false,
	"type": "stack",
	"key": "stack-SvgUkCfpTSrttzwSl2fvI",
	"index": 1,
	"routeNames": ["Home", "Details", "Other"],
	"routes": [{
		"key": "Root-IZQ1cadiH6Jt8Bm0qsmfs",
		"name": "Home",// 当前栈中第一个页面的路由名称
		"state": {
			"stale": false,
			"type": "tab",// 这个就是类型
			"key": "tab-Ac6m67kl-H4bbzsDezYmF",
			"index": 0,
			"routeNames": [// 当前栈的所有路线名称],
			"history": [{
				"type": "route",
				"key": "Shops-hZewUuYoWPlHCcCQ8658w"
			}],
			"routes": [
              {
                  "name": "Home1",
                  "key": "Home1-hZewUuYoWPlHCcCQ8658w"
              }, {
                  "name": "Home2",
                  "key": "Home2-S2O7B1mUcvCNmQXWHR37H"
              }
            ] // 当前栈的路由名称
		}
	}, {
		"key": "Details-l-FkJEKiWSn9A3bU8ZwQz",
		"name": "Details",
		"params": {}// 跳转页面所传递的参数,比如这里就是从 Home > Details
	}]
}

1.2 onReady

当页面准备好了会回调

函数声明:

onReady?: (() => void) | undefined;

这个 props 我觉得应该有当前路由相关的信息,不然当准备好,什么准备好,也就是缺少主语,但我们可以配合 NavigationContainer 的 ref 的 getCurrentRoute 方法获取当前页面的相关信息