【问题标题】:React Navigation V5: How to navigate to particular tab of BottomTabNavigator (react navigation version 5)React Navigation V5:如何导航到 BottomTabNavigator 的特定选项卡(反应导航版本 5)
【发布时间】:2020-03-06 09:23:50
【问题描述】:

我有这样的代码:

 <Stack.Navigator headerMode='none'>
        <Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Signup" component={Signup} />
        <Stack.Screen name="OnboardingSummary" component={OnboardingSummary} />  
        <Stack.Screen name="BottomTabs" component={BottomTabs} />
        <Stack.Screen name="Player" component={Player} />
    </Stack.Navigator>

这里的BottomTabs是BottomTab BottomTabNavigator

const Tab = createBottomTabNavigator();
    <Tab.Navigator
        tabBar={props => <VialmaTabs {...props} />}
    >
        <Tab.Screen name="Profile" component={profileStack} />
        <Tab.Screen name="Home" component={HomeStack} />
    </Tab.Navigator>

Home 堆栈有 2 个屏幕 UserList、UserDetails

function HomeStack() {
return (
    <RadioStack.Navigator headerMode='none'>
        <RadioStack.Screen name="UserList" component={UserList} />
        <RadioStack.Screen name="UserDetails" component={UserDetails} />
    </RadioStack.Navigator>
);

}

我现在在播放器屏幕上,我想重定向用户详细信息屏幕(它将跳过底部选项卡和 UseList。

我怎样才能做到这一点?

【问题讨论】:

  • 你试过 props.navigation.navigate({routeName:"UserDetails"}) 吗?
  • @giotskhada 没有用。尝试以下解决方案但无法正确解决

标签: reactjs react-native react-navigation


【解决方案1】:

我得到了解决上述问题的方法,我也想和你分享。

import { StackActions, CommonActions } from '@react-navigation/native';

this.props.navigation.dispatch(StackActions.replace('BottomTabs', {
            screen: 'Home', 
                params: {
                         screen: 'UserDetails',
                         params: {
                           [....PARAMS],
                         }
                }
        }));

希望对你有帮助!

【讨论】:

  • react-navigation 版本 4 我需要同样的东西,有人知道怎么做吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-12-13
  • 2018-07-12
  • 2020-06-30
  • 2021-10-20
  • 2021-05-02
相关资源
最近更新 更多