如何使用反应导航 v5 从另一个选项卡导航到一个选项卡
Posted
技术标签:
【中文标题】如何使用反应导航 v5 从另一个选项卡导航到一个选项卡【英文标题】:How do navigate to a tab from another tab using react navigation v5 【发布时间】:2020-12-13 09:48:25 【问题描述】:我有 3 个选项卡,每个选项卡都包含一组堆栈导航器。
-
首页堆栈
const HomeNavigator = createStackNavigator();
const HomeStackNavigator = (navigation, route) =>
return (
<HomeNavigator.Navigator>
<HomeNavigator.Screen
name="Home"
component=Home
/>
<HomeNavigator.Screen
name="Profile"
component=Profile
/>
<HomeNavigator.Screen
name="Settings"
component=Settings
/>
</HomeNavigator.Navigator>
);
;
-
存储堆栈
const StoreNavigator = createStackNavigator();
const StoreStackNavigator = (navigation, route) =>
return (
<StoreNavigator.Navigator>
<StoreNavigator.Screen
name="OurStore"
component=Store
/>
</StoreNavigator.Navigator>
);
;
-
社区堆栈
const CommunityNavigator = createStackNavigator();
const CommunityStackNavigator = (navigation, route) =>
return (
<CommunityNavigator.Navigator>
<CommunityNavigator.Screen
name="Community"
component=Community
/>
<CommunityNavigator.Screen
name="CommunityReply"
component=CommunityReply
options=communityReplyOptions
/>
<CommunityNavigator.Screen
name="AskCommunity"
component=AskCommunity
/>
</CommunityNavigator.Navigator>
);
;
标签导航器
const MainNavigator = createBottomTabNavigator();
const MainTabNavigator = () =>
return (
<MainNavigator.Navigator
screenOptions=tabScreenOptions
tabBarOptions=tabBarOptions>
<MainNavigator.Screen
name="HomeTab"
component=HomeStackNavigator
options=tabBarLabel: 'Home'
/>
<MainNavigator.Screen
name="StoreTab"
component=StoreStackNavigator
options=tabBarLabel: 'Store'
/>
<MainNavigator.Screen
name="CommunityTab"
component=CommunityStackNavigator
options=tabBarLabel: 'Community'
/>
</MainNavigator.Navigator>
);
;
现在单击按钮时的主页选项卡我需要导航到社区选项卡导航器内的社区回复屏幕。有人可以帮我解决这个问题吗
React 导航版本
"@react-navigation/bottom-tabs": "^5.8.0"
"@react-navigation/native": "^5.7.3"
"@react-navigation/stack": "^5.9.0"
【问题讨论】:
【参考方案1】:以下应该在这种情况下工作:
this.props.navigation.navigate('CommunityTab', screen: 'CommunityReply' );
【讨论】:
你知道navigation.reset怎么做吗?我是这样做的,但是没有用。 this.props.navigation.reset( index: 0, routes: [name: 'CommunityTab', screen: 'CommunityReply'], ) 试试这个 - ***.com/a/63528641/7022711 谢谢,它很有效以上是关于如何使用反应导航 v5 从另一个选项卡导航到一个选项卡的主要内容,如果未能解决你的问题,请参考以下文章
使用 Bootstrap 导航选项卡从另一个选项卡跳转到特定选项卡