如何在React Native应用程序中导航时添加两个屏幕,但不在TabBar中显示它们?
P粉155551728
P粉155551728 2023-08-20 10:44:44
[React讨论组]
<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 = () =&gt; { const isUserAuthenticated = false; return ( &lt;NavigationContainer&gt; {isUserAuthenticated ? ( &lt;AppNavigator /&gt; ) : ( &lt;GuestNavigator /&gt; )} &lt;/NavigationContainer&gt; ) } 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 }) =&gt; { return ( &lt;Tab.Navigator tabBar={props =&gt; &lt;TabBar {...props} /&gt;}&gt; &lt;Tab.Screen name="Home" component={HomeScreen} /&gt; &lt;Tab.Screen name="SampleNotas" component={SampleNotasScreen} /&gt; &lt;Tab.Screen name="SampleCuras" component={SampleCurasScreen} /&gt; &lt;Tab.Screen name="SamplePerfil" component={SamplePerfilScreen} /&gt; &lt;Tab.Screen name="Login" options={{ tabBarVisible: false }} children={() =&gt; &lt;LoginScreen handleLogin={handleLogin} /&gt;} /&gt; &lt;/Tab.Navigator&gt; ); }; 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 = () =&gt; { return ( &lt;Tab.Navigator tabBar={props =&gt; &lt;TabBar {...props} /&gt;}&gt; &lt;Tab.Screen name="Notas" component={NotasScreen} /&gt; &lt;Tab.Screen name="CrearNota" component={CrearNotaScreen} options={{ tabBarVisible: false }} /&gt; &lt;Tab.Screen name="Curas" component={CurasScreen} /&gt; &lt;Tab.Screen name="Recordatorios" component={RecordatoriosScreen}/&gt; &lt;Tab.Screen name="Profile" component={ProfileScreen} /&gt; &lt;Tab.Screen name="EditProfile" component={EditarProfileScreen} options={{ tabBarVisible: false }} /&gt; &lt;/Tab.Navigator&gt; ); }; 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 = () =&gt; { return ( &lt;NavigationContainer&gt; &lt;Stack.Navigator&gt; &lt;Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false, }} /&gt; &lt;Stack.Screen name="Register" component={RegisterScreen} options={{ title: 'Registro', }} /&gt; &lt;/Stack.Navigator&gt; &lt;/NavigationContainer&gt; ) } 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 }) =&gt; { return ( &lt;View style={{ flexDirection: 'row', height: 60, backgroundColor: '#F3F9F5' }}&gt; {state.routes.map((route, index) =&gt; { const { options } = descriptors[route.key]; const onPress = () =&gt; { 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 ( &lt;TouchableOpacity key={index} onPress={onPress} style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} &gt; &lt;</code></pre>
P粉155551728
P粉155551728

全部回复(1)
P粉014218124

要解决这个问题,请像这样将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中移除登录选项卡。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号