Javascript 单击“登录”后如何添加底部选项卡菜单

我是新来的本地人，对路由/导航感到困惑。基本上，我有4个屏幕，分别是

登录

，

注册

，

主页

和

链接

。已设置

注册表

和

登录

。我使用了

stackNavigator

，以便用户无论是否要注册，都可以单击“上一步”。但是当我单击login时，我想将用户重定向到我的

主页

屏幕，该屏幕有一个选项卡菜单或容器。这段代码的当前输出是，当我注册时，我可以通过按我创建的文本返回登录。当我成功登录时，是否有人可以向我展示或提供有关如何执行底部选项卡的链接

我的电流输出在这里

我从我的组件到切换屏幕使用了

onPress={（）=>{navigation.navigate（'Route'）}

功能

以下是我的一些代码：

AppNavigation.js

import { createStackNavigator } from 'react-navigation-stack'
import Register from '../screens/RegisterScreen'
import Login from '../screens/LoginScreen'

const AppNavigation = createStackNavigator(
  {
    Login: { screen: Login},
    Register: { screen: Register },
  },
  {
    initialRouteName: 'Login',
    headerMode: 'none'
  }
)
export default AppNavigation

import { createStackNavigator } from 'react-navigation-stack'
import Login from '../screens/LoginScreen'
const AuthNavigation = createStackNavigator(
  {
    Login: { screen: Login },
  },
  {
    initialRouteName: 'Login',
  }
)
export default AuthNavigation

AuthNavigation.js

import { createStackNavigator } from 'react-navigation-stack'
import Register from '../screens/RegisterScreen'
import Login from '../screens/LoginScreen'

const AppNavigation = createStackNavigator(
  {
    Login: { screen: Login},
    Register: { screen: Register },
  },
  {
    initialRouteName: 'Login',
    headerMode: 'none'
  }
)
export default AppNavigation

import { createStackNavigator } from 'react-navigation-stack'
import Login from '../screens/LoginScreen'
const AuthNavigation = createStackNavigator(
  {
    Login: { screen: Login },
  },
  {
    initialRouteName: 'Login',
  }
)
export default AuthNavigation

index.js（内部自./navigation/index.js）

App.js

export default function App() {
    return (
      <AppContainer />
    );
  }
}

导出默认函数App（）{
返回(

我在这里遵循了auth模式
在onPress上尝试此语法

onPress={()=> this.props.navigation.navigate('Register')}

您的问题：我成功登录时如何执行底部选项卡？

创建主零部件

当您的登录成功时

if（登录成功）{
this.props.navigation.navigate（'Home'）；
}
使用以下语法可以在所需组件之间导航

if(login == true){
  this.props.navigation.navigate('Home');
  // You can use this.props.navigation.push('Home'); as well
}

是使用React-Native进行导航和路由的良好参考。
在React-navigation v5和v6中执行此操作的方法如下。使用createContext设置全局身份验证提供程序。然后在switch语句中使用该提供程序来确定应使用身份验证堆栈还是主导航堆栈。主导航堆栈（本例中为AppStack）将是嵌套在堆栈导航器中的底部选项卡导航器，初始RouteName设置为“Home”（或堆栈导航中调用的主屏幕）

提供者可以是这样的


export const AuthUserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <AuthUserContext.Provider value={{ user, setUser }}>
      {children}
    </AuthUserContext.Provider>
  );
};


export const AuthUserProvider=（{children}）=>{
const[user，setUser]=useState（null）；
返回(
{儿童}
);
};

带有switch语句的嵌套堆栈导航器应该如下所示：

export default function Routes() {
  const Root = createStackNavigator();
  const { user, setUser } = useContext(AuthUserContext);

//....authentication hooks

return (
    <NavigationContainer>
      <Root.Navigator
        {user ?
          (<Root.Screen name='AppStack' component={AppStack} />)
          :
          (<Root.Screen name='AuthStack' component={AuthStack} />)
        }
      <Root.Navigator>
    <NavigationContainer>
)

导出默认函数路由（）{
const Root=createStackNavigator（）；
const{user，setUser}=useContext（AuthUserContext）；
//…身份验证挂钩
返回(
我将导航改为v 5.x，所以我的代码有点变化。你能教我怎么做吗？你有类似于身份验证流的repo吗？对不起，@Vince我不明白你说的是什么。请跟我解释一下，你有类似于使用react native中的选项卡的身份验证流存储库吗？当然@Vince这是我的公共存储库