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

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 3

对于本地问题314，486，1335进行了一些长时间的讨论，最后我们在2017年9月27日之后得到了一个更好的内置方式来处理这个问题，react-navigation version 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);
    },
  }),
});

Answer 4

如果您使用的是react-navigation版的 5 ，则可以在标签屏幕定义中添加tab-press侦听器，以进行一些预处理，如{ {3}}

<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将不会打开，而是{ {1}}将打开（注意：LoginScreen是导航名称，将在屏幕的某些位置注册）。但是，如果用户登录，它将正常运行。

Answer 5

如果您打算使用Window属性，则可以在react中轻松地做到这一点。

请检查window内return之前是否存在render。

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

}

Answer 6

componentDidMount () {
    this.props.navigation.addListener('willFocus', (route) => { console.log(" Tab click is working ") });
}

选项卡更改时的反应导航

6 个答案:

新功能