用户登录后显示底部导航

Posted 2023-02-22

【中文标题】用户登录后显示底部导航

【英文标题】：Show BottomNavigation once the user is logged

【发布时间】：2021-12-24 01:44:54

【问题描述】：

我想使用BottomNavigation 在屏幕之间导航，实际上它与BottomNavigation.SceneMap(...) 一起工作正常

但是BottomNavigation 它在每个屏幕上都显示，我只想在用户登录后显示。点击登录按钮后

import React from 'react'
import  Provider  from 'react-redux'
import  createStore  from 'redux'
import userReducer from './src/reducers/user'
import  NavigationContainer  from '@react-navigation/native'
import  BottomNavigation, Text  from 'react-native-paper'
import  createStackNavigator  from '@react-navigation/stack'
import  theme  from './src/core/theme'
import 
  StartScreen,
  Dashboard,
  GroupScreen,
  InviteScreen,
  CreateGroup,
 from './src/screens'

const Stack = createStackNavigator()
const store = createStore(userReducer)
export default function App() 
  const [index, setIndex] = React.useState(0)
  const [routes] = React.useState([
     key: 'music', title: 'Music', icon: 'queue-music' ,
     key: 'albums', title: 'Albums', icon: 'album' ,
  ])

  const one = () => (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="StartScreen"
      >
        <Stack.Screen name="StartScreen" component=StartScreen />
        <Stack.Screen name="Dashboard" component=Dashboard /> 
      </Stack.Navigator>
    </NavigationContainer>
  )

  const two = () => (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="InviteScreen" component=InviteScreen />
      </Stack.Navigator>
    </NavigationContainer>
  )

  const renderScene = BottomNavigation.SceneMap(
    music: one,
    albums: two,
  )

  return (
    <Provider store=store theme=theme>
      <BottomNavigation
        navigationState= index, routes 
        onIndexChange=setIndex
        renderScene=renderScene
      />
    </Provider>
  )

通过答案编辑：

当我按下按钮登录时我这样做了，我需要重定向到仪表板，但仪表板在 mytabs 中

function MyTabs() 
  return (
    <Tab.Navigator>
      <Tab.Screen name="Dashboard" component=Dashboard />
      
    </Tab.Navigator>
  )

什么都不渲染，我只是从这里复制任何示例https://reactnavigation.org/docs/bottom-tab-navigator/ 在我的本地渲染中的任何一个，我正在使用 EXPO

例如这个

import * as React from 'react';
import  Text, View  from 'react-native';
import  NavigationContainer  from '@react-navigation/native';
import  createBottomTabNavigator  from '@react-navigation/bottom-tabs';

function HomeScreen() 
  return (
    <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
      <Text>Home!</Text>
    </View>
  );


function SettingsScreen() 
  return (
    <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
      <Text>Settings!</Text>
    </View>
  );


const Tab = createBottomTabNavigator();

function MyTabs() 
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component=HomeScreen />
      <Tab.Screen name="Settings" component=SettingsScreen />
    </Tab.Navigator>
  );


export default function App() 
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );

错的是display:none

【参考方案1】：

您需要将您的 BottomNavigation 并排放置在另一个具有 loginScreen 的堆栈中。

尝试使用 createBottomTabNavigator

import  createBottomTabNavigator  from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() 
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component=HomeScreen />
      <Tab.Screen name="Settings" component=SettingsScreen />
    </Tab.Navigator>
  );

<NavigationContainer>
  <Stack.Navigator initialRouteName="loginScreen">
    <Stack.Screen name="loginScreen" component=LoginScreen />
    <Stack.Screen name="main" component=MyTabs />
  </Stack.Navigator>
</NavigationContainer>

【讨论】：

我收到此错误模块未找到：无法解析 '/myapp/native/front/react-native-login-template' 中的 '@react-navigation/bottom-tabs'跨度>

你是用yarn add @react-navigation/bottom-tabs命令添加包的吗？

你的答案是删除BottomNavigation，BottomNavigation.SceneMap(，另外你的答案没有渲染任何东西，看我发张照片

当您尝试重置路线时，您应该逐步指定屏幕根据我在您的编辑中看到的内容，您需要在重置操作中添加嵌套屏幕添加 initialRouteName="Dashboard" 到 MyTabs ( Tab.Navigator），然后在重置操作中试试这个："index":0,"routes":["name":"main"]

另外，你正在使用带有底部导航的 react-native-paper，我建议使用反应导航底部标签

【参考方案2】：

使用 MyTabs() 获取已有的内容并创建一个 LoginScreen，然后执行以下操作。您将需要检测用户是否在场。如果有用户，则显示主屏幕，如果没有则显示登录屏幕。

<>
      <Stack.Navigator screenOptions= headerShown: false >
        user ? (
          <Stack.Screen name="Main" component=MainStack />
        ) : (
          <Stack.Screen name="Login" component=LoginStack />
        )
      </Stack.Navigator>
    </>

【参考方案3】：

最好的方法是这样做：

<NavigationContainer>
      user !== null ? <RootNavigator /> : <AuthNavigator />
</NavigationContainer>

用户是一个useState。 NavigationContainer 有 2 个选项。如果用户已登录，则显示带有底部导航的 RootNAvigator，否则显示身份验证流程。