这个官方给的示例,我按照官网然后添加输出日志,如下效果:
下面是 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 方法获取当前页面的相关信息