[英]Show BottomNavigation once the user is logged
I want to use BottomNavigation
to navigation between screens actually its working fine with BottomNavigation.SceneMap({...})
我想使用
BottomNavigation
在屏幕之间导航实际上它与BottomNavigation.SceneMap({...})
一起工作正常
but the BottomNavigation
its being showing in every screens, i only want to show once the user is logged.但是
BottomNavigation
显示在每个屏幕中,我只想在用户登录后显示。 after click on login button点击登录按钮后
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>
)
}
EDIT by answers:按答案编辑:
i did this when i pressed the button login i need to redirect to dashboard but dashboard is in mytabs我在按下按钮登录时这样做了我需要重定向到仪表板但仪表板在 mytabs 中
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Dashboard" component={Dashboard} />
</Tab.Navigator>
)
}
does not render nothing, i just to copy any example from here https://reactnavigation.org/docs/bottom-tab-navigator/ any of those render in my local, i am using EXPO不渲染任何内容,我只是从这里复制任何示例https://reactnavigation.org/docs/bottom-tab-navigator/在我本地渲染的任何示例,我正在使用 EXPO
for example this例如这个
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>
);
}
the wrong is display:none
错误是
display:none
You need to put your BottomNavigation in another stack that has loginScreen side by side.您需要将您的 BottomNavigation 放在另一个并排登录屏幕的堆栈中。
Try using createBottomTabNavigator尝试使用 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>
Take what you already have with MyTabs() and create a LoginScreen and then do the following.使用您已有的 MyTabs() 并创建一个 LoginScreen,然后执行以下操作。 You will need to detect whether the user is present.
您将需要检测用户是否存在。 If there is a user, then show the main screen, if not show the login screen.
如果有用户,则显示主屏幕,如果没有则显示登录屏幕。
<>
<Stack.Navigator screenOptions={{ headerShown: false }}>
{user ? (
<Stack.Screen name="Main" component={MainStack} />
) : (
<Stack.Screen name="Login" component={LoginStack} />
)}
</Stack.Navigator>
</>
The best way is to do like this:最好的方法是这样做:
<NavigationContainer>
{user !== null ? <RootNavigator /> : <AuthNavigator />}
</NavigationContainer>
The user is a useState.用户是一个 useState。 The NavigationContainer has 2 options.
NavigationContainer 有 2 个选项。 If the user is logged it shows the RootNAvigator with the bottomNavigation, if not it shows the authentication flow.
如果用户已登录,它会显示带有底部导航的 RootNAvigator,否则它会显示身份验证流程。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.