Question

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

我的代码

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"
        }
      }
    }
  )
);

Answer 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);
        }}
      />
    );
  }
}

NavigationService.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' });

从抽屉式导航切换底部标签

1 个答案: