Question

我是本机反应的新手，我对路由/导航感到困惑。基本上，我有4个屏幕，分别是Login，Register，Home和Links。 Register和Login已设置。我使用stackNavigator是为了让用户单击是否要注册。但是，当我单击登录时，我想将用户重定向到我的Home屏幕，该屏幕具有选项卡菜单或容器。该代码的当前输出是，当我注册时，可以通过按我输入的文本来返回登录名。成功登录后，有人可以向我显示或提供一些有关如何执行底部选项卡的链接吗？

我当前的输出在这里 https://imgur.com/a/9lsHCe6

我利用了组件中的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

AuthNavigation.js

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内）

import { createSwitchNavigator, createAppContainer } from 'react-navigation'
import AuthNavigation from './AppNavigation'
import AppNavigation from './AppNavigation'

const SwitchNavigator = createSwitchNavigator(
  {
    Auth: AuthNavigation,
    App: AppNavigation
  },
  {
    initialRouteName: 'Auth',
  }
)
const AppContainer = createAppContainer(SwitchNavigator)
export default AppContainer

App.js

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

我当前的目录

我在这里遵循身份验证模式 https://heartbeat.fritz.ai/how-authentication-flow-works-in-react-native-apps-using-react-navigation-4-x-a30bb4d9e5d6

Answer 1

在onPress上尝试使用此语法

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

您的问题：成功登录后如何做底部标签？

创建家庭组件

成功登录后即可

if(login is successfully){
  this.props.navigation.navigate('Home');
}

Answer 2

使用以下语法可以在您想要的组件之间导航。

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

Here 是使用 React Native 导航和路由的良好参考。

Answer 3

您可以在 React Navigation v5 和 v6 中执行此操作的方法如下。使用 createContext 设置全局身份验证提供程序。然后在 switch 语句中使用它来确定您应该使用 Auth 堆栈还是主导航堆栈。主导航堆栈（在本例中为 AppStack）将是嵌套在堆栈导航器内的底部选项卡导航器，initialRouteName 设置为“Home”（或您的主屏幕在堆栈导航中调用的任何内容）。

提供者看起来像这样


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

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

带有 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>
)

点击本机后，如何响应本机如何添加底部标签菜单

3 个答案: