选项卡更改时的反应导航

Question

如果不使用Redux,如何使用react导航选项卡导航器检测选项卡更改？

我知道我需要以某种方式使用onNavigationStateChange但我无法弄清楚如何更新当前视图.

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

Answer 1

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

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

Answer 2

如果您使用的是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>

说明：当Home标签被点击时BottomBar，如果用户未登录，HomeScreen则不会打开而是LoginScreen会打开（注意：LoginScreen导航名称将在某个屏幕上注册）。但如果用户已登录，则它会正常运行。

Answer 3

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,则可以存储有关当前路由的全局信息,这样您既可以检测选项卡更改,也可以告诉哪个选项卡现在处于活动状态.

Answer 4

在 react-native 问题314、486、1335 中对此进行了长时间的讨论，最终我们有了更好的内置方法来处理这个问题，在 2017 年 9 月 27 日之后，react-navigation 版本v1.0.0-beta.13：

新功能

接受 tabBarOnPress 参数 (#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);
    },
  }),
});