标签更改时的React导航

aiqt4smr  于 2023-06-30  发布在  React
关注(0)|答案(5)|浏览(174)

如果不使用Redux,我如何使用react导航标签导航器检测标签更改?
我知道我需要以某种方式使用onNavigationStateChange,但我不知道如何更新当前视图。

export default () => <MyTabNav
    ref={(ref) => { this.nav = ref; }}
    onNavigationStateChange={(prevState, currentState) => {
        //call function on current view
    }}
/>;
vom3gejh

vom3gejh1#

实际上,您可以在组件中添加一个特殊的侦听器

componentDidMount () {
    this.props.navigation.addListener('willFocus', (route) => { //tab changed });
}
uyhoqukh

uyhoqukh2#

如果您使用的是react-navigation版本5或更高版本,那么您可以在选项卡屏幕定义中添加tab-press侦听器,以进行一些预处理,如文档中所述

<Tab.Navigator>
    <Tab.Screen
        component={HomeScreen}
        name="HomeScreen"
        listeners={{
          tabPress: e => {
            if (userIsNotLoggedIn) {
              // Prevent default action
              e.preventDefault();
              navigation.navigate("LoginScreen");
            }
          },
        }}
      />
      <Tab.Screen
        ../>
</Tab.Navigator>

说明:在BottomBar中单击Home选项卡时,如果用户未登录,则不会打开HomeScreen,而是打开LoginScreen(注意:LoginScreen是导航名称,将在屏幕的某个位置注册)。但如果用户已登录,则它将正常运行。

从react-navigation v6开始,您还可以通过screenListeners属性在<Tab.Navigator>上放置一个tabPress侦听器。

pinkon5k

pinkon5k3#

export default () => <MyTabNav
    ref={(ref) => { this.nav = ref; }}
    onNavigationStateChange={(prevState, currentState) => {
       const getCurrentRouteName = (navigationState) => {
         if (!navigationState) return null;
         const route = navigationState.routes[navigationState.index];
         if (route.routes) return getCurrentRouteName(route);
         return route.routeName;
       };
    global.currentRoute = getCurrentRouteName(currentState);
  }}
/>;

如果你不想使用redux,这就是你如何存储关于当前路由的全局信息,这样你既可以检测标签的变化,也可以知道哪个标签现在是活动的。

jpfvwuh4

jpfvwuh44#

关于这个问题,react-native issue 3144861335有一些长时间的讨论,最后我们得到了一个更好的内置方式来处理这个问题,在2017年9月27日之后,react-navigation版本v1.0.0-beta.13

新增功能

Accept a tabBarOnPress param(#1335)- @cooperka

用法:

const MyTabs = TabNavigator({
  ...
}, {
  tabBarComponent: TabBarBottom /* or TabBarTop */,
  tabBarPosition: 'bottom' /* or 'top' */,
  navigationOptions: ({ navigation }) => ({
    tabBarOnPress: (scene, jumpToIndex) => {
      console.log('onPress:', scene.route);
      jumpToIndex(scene.index);
    },
  }),
});
s4chpxco

s4chpxco5#

如果你打算使用Window属性,你可以在react中轻松地完成。
检查window是否在render内部的return之前。

if (typeof window !== "undefined") {
window.addEventListener('visibilitychange, () => {
window.document.title = window.document.hidden;
console.log(document.hidden ? "Out" : "In");
this.props.doFunction();

}

相关问题