如何在React Native应用程序中导航时添加两个屏幕，但不在TabBar中显示它们？
<p>我需要用户注册和登录界面不显示在应用程序的<code>TabBar</code>中
我有一个简单的应用程序，我试图有两种类型的用户界面，一种是访客模式，一种是用户认证模式。
我为每个<code>authentication</code>条件创建了一个导航，以便显示应用程序的每个状态对应的TabBar，或者访客模式或者认证模式。我还有一个<code>TabBar</code>组件来显示每个导航的图标。</p>
<p>当我想要添加<code>LoginScreen</code>和<code>RegisterScreen</code>屏幕时，问题出现了，因为我无法访问它们。</p>
<p>我尝试创建第三个<code>Navigation</code>（AuthNavigator）来管理这些屏幕，最终获得了访问权限，但它们显示在TabBar上，
但是这是不允许的，这些屏幕不能从<code>TabBar</code>访问</p>
<p>我需要它们在导航中，但不显示在<code>TabBar</code>上。</p>
<p>在<code>TabBar</code>文件中没有添加这些屏幕，所以不显示<code>Icon</code>，但显示标题</p>
<p>我尝试使用<code>options={{ tabBarVisible: false }}</code>，但没有效果</p>
<p>还尝试了<code>display = "none"</code>，但没有成功。</p>
<p>我在Google上寻找解决方案，但没有找到任何东西。</p>
<p>我想展示我的导航系统，以指导我做错了什么，以及如何纠正我的错误。</p>
<p>--------- App.js ---------</p>
<pre class="brush:php;toolbar:false;">import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import GuestNavigator from './navigation/GuestNavigator'
import AppNavigator from './navigation/AppNavigator'
const App = () => {
const isUserAuthenticated = false;
return (
<NavigationContainer>
{isUserAuthenticated ? (
<AppNavigator />
) : (
<GuestNavigator />
)}
</NavigationContainer>
)
}
export default App</pre>
<p><strong>---这是访客模式的导航---</strong></p>
<p>---- GuestNavigator.JS -------</p>
<pre class="brush:php;toolbar:false;">import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import TabBar from '../components/TabBar';
const Tab = createBottomTabNavigator();
const GuestNavigator = ({ handleLogin }) => {
return (
<Tab.Navigator tabBar={props => <TabBar {...props} />}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="SampleNotas" component={SampleNotasScreen} />
<Tab.Screen name="SampleCuras" component={SampleCurasScreen} />
<Tab.Screen name="SamplePerfil" component={SamplePerfilScreen} />
<Tab.Screen
name="Login"
options={{ tabBarVisible: false }}
children={() => <LoginScreen handleLogin={handleLogin} />}
/>
</Tab.Navigator>
);
};
export default GuestNavigator;</pre>
<p><em><strong>--这是认证模式的导航--</strong></em></p>
<p>------ AppNavigator.JS ---------</p>
<pre class="brush:php;toolbar:false;">import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import TabBar from '../components/TabBar';
const Tab = createBottomTabNavigator();
const AppNavigator = () => {
return (
<Tab.Navigator tabBar={props => <TabBar {...props} />}>
<Tab.Screen name="Notas" component={NotasScreen} />
<Tab.Screen name="CrearNota" component={CrearNotaScreen} options={{ tabBarVisible: false }} />
<Tab.Screen name="Curas" component={CurasScreen} />
<Tab.Screen name="Recordatorios" component={RecordatoriosScreen}/>
<Tab.Screen name="Profile" component={ProfileScreen} />
<Tab.Screen name="EditProfile" component={EditarProfileScreen} options={{ tabBarVisible: false }} />
</Tab.Navigator>
);
};
export default AppNavigator</pre>
<p>我还为登录和注册创建了一个导航系统</p>
<p>------- AuthNavigator.js ----------</p>
<pre class="brush:php;toolbar:false;">import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import LoginScreen from '../screens/AuthScreens/LoginScreen'
import RegisterScreen from '../screens/AuthScreens/RegisterScreen'
const Stack = createStackNavigator()
const AuthNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Login"
component={LoginScreen}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="Register"
component={RegisterScreen}
options={{
title: 'Registro',
}}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default AuthNavigator</pre>
<p>当然，如果我从GuestNavigator导航中删除LoginScrein，我会得到错误：</p>
<p><strong>错误：未处理任何导航器的负载为{"name":"Login"}的动作'NAVIGATE'。
是否有名为'Login'的屏幕？
如果您尝试导航到嵌套导航器中的屏幕，请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator。
这只是一个开发时的警告，不会在生产中显示。</strong></p>
<p>我还显示了TabBar，尽管它显示了图标，但这些屏幕没有添加。
----- TabBar.js -----------</p>
<pre><code>import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
const TabBar = ({ state, descriptors, navigation, isUserAuthenticated }) => {
return (
<View style={{ flexDirection: 'row', height: 60, backgroundColor: '#F3F9F5' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
});
if (!event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const isFocused = state.index === index;
const color = isFocused ? '#08A438' : 'black';
let iconName;
if (!isUserAuthenticated) {
// Iconos para el modo invitado
if (route.name === 'Home') {
iconName = 'home';
} else if (route.name === 'SampleNotas') {
iconName = 'list';
} else if (route.name === 'SampleCuras') {
iconName = 'medkit';
} else if (route.name === 'SamplePerfil') {
iconName = 'person';
}
} else {
// Iconos para el modo autenticado
if (route.name === 'Notas') {
iconName = 'notes';
} else if (route.name === 'Curas') {
iconName = 'medkit';
} else if (route.name === 'Recordatorios') {
iconName = 'alarm';
} else if (route.name === 'Profile') {
iconName = 'person';
}
}
return (
<TouchableOpacity
key={index}
onPress={onPress}
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
>
<</code></pre>
1
1050
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
要解决这个问题，请像这样将Guestnavigator添加到AuthNavigator中：
const AuthNavigator = ({}) => { return ( <Stack.Navigator> <Stack.Screen name="GuestStack" component={GuestNavigator}/> <Stack.Screen name="Login" component={LoginScreen}/> <Stack.Screen name="Register" component={RegisterScreen}/> </Stack.Navigator> ); };将
App.js重构为：const App = () => { return ( <NavigationContainer> {isAuth ? <AuthNavigator /> : <AppNavigator />} </NavigationContainer> ) }并且不要忘记从
GuestNavigator中移除登录选项卡。