从抽屉导航切换底部标签答案

【问题标题】：Switch bottom tabs from drawer navigation从抽屉导航切换底部标签
【发布时间】：2019-09-06 10:39:43
【问题描述】：

*:- 我有底部标签 =>（主页、列表、数据）。 *:- 我有一个抽屉导航。 *:- 我也想在抽屉导航中添加（主页、列表、数据）。 *:- 然后我想从抽屉导航触发选项卡更改。 *:- 假设如果我单击抽屉中的列表或数据项，它应该调用事件并更改底部选项卡

我的代码

const tabNavigator = createBottomTabNavigator({
  HomeStack,
  UserStack,
  LinksStack,
  SettingsStack
});

const AppStack = createStackNavigator(
  { Main: tabNavigator },
  {
    headerMode: "none"
  }
);

const DrawerNav = createDrawerNavigator(
  {
    Home: AppStack
  },
  {
    contentComponent: props => (
      <SafeAreaView style={styles.container}>
        <View
          style={{
            height: 100,
            alignItems: "center",
            justifyContent: "center",
            background: "#5cb7e6"
          }}
        ></View>
        <ScrollView>
          <DrawerItems {...props} />
        </ScrollView>
      </SafeAreaView>
    )
  }
);



const AuthStack = createStackNavigator  (
  { SignIn: Login },
  {
    headerMode: "none"
  }
);



export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: DrawerNav,
      Auth: AuthStack
    },
    {
      initialRouteName: "AuthLoading",
      defaultNavigationOptions: {
        headerStyle: {
          backgroundColor: "#0082c6"
        },
        headerTintColor: "#fff",
        headerLayoutPreset: "center",
        headerTitleStyle: {
          fontWeight: "bold"
        }
      }
    }
  )
);

【问题讨论】：

你能试着重写你的问题吗？我不明白你想要完成什么
*:- 我有底部标签 =>（主页、列表、数据）。 *:- 我有一个抽屉导航。 *:- 我想在抽屉导航中添加（主页、列表、数据） *:- 然后我想从抽屉导航触发标签更改
嗨@Farhan 你设法解决了这个功能吗？我也有同样的问题。

标签： react-native react-native-navigation stack-navigator react-navigation-drawer

【解决方案1】：

Use this

App.js

 import { createStackNavigator, createAppContainer } from 'react-navigation';
 import NavigationService from './NavigationService';

    const TopLevelNavigator = createStackNavigator({
      /* ... */
    });

const AppContainer = createAppContainer(TopLevelNavigator);

export default class App extends React.Component {
  // ...

  render() {
    return (
      <AppContainer
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
      />
    );
  }
}

导航服务.js

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

现在您可以从任何 js 模块访问任何路由

import NavigationService from 'path-to-NavigationService.js';

// ...

NavigationService.navigate('ChatScreen', { userName: 'Lucy' });

【讨论】：