如果不使用Redux,我如何使用react导航标签导航器检测标签更改?
我知道我需要以某种方式使用onNavigationStateChange,但我不知道如何更新当前视图。
export default () => <MyTabNav
ref={(ref) => { this.nav = ref; }}
onNavigationStateChange={(prevState, currentState) => {
//call function on current view
}}
/>;
5条答案
按热度按时间vom3gejh1#
实际上,您可以在组件中添加一个特殊的侦听器
uyhoqukh2#
如果您使用的是react-navigation版本5或更高版本,那么您可以在选项卡屏幕定义中添加
tab-press
侦听器,以进行一些预处理,如文档中所述说明:在
BottomBar
中单击Home
选项卡时,如果用户未登录,则不会打开HomeScreen
,而是打开LoginScreen
(注意:LoginScreen
是导航名称,将在屏幕的某个位置注册)。但如果用户已登录,则它将正常运行。从react-navigation v6开始,您还可以通过
screenListeners
属性在<Tab.Navigator>
上放置一个tabPress
侦听器。pinkon5k3#
如果你不想使用redux,这就是你如何存储关于当前路由的全局信息,这样你既可以检测标签的变化,也可以知道哪个标签现在是活动的。
jpfvwuh44#
关于这个问题,react-native issue 314,486,1335有一些长时间的讨论,最后我们得到了一个更好的内置方式来处理这个问题,在2017年9月27日之后,react-navigation版本v1.0.0-beta.13:
新增功能
Accept a tabBarOnPress param(#1335)- @cooperka
用法:
s4chpxco5#
如果你打算使用
Window
属性,你可以在react中轻松地完成。检查
window
是否在render
内部的return
之前。}