从抽屉导航切换底部选项卡

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

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