如何在React Native應用程式中導航時添加兩個螢幕，但不在TabBar中顯示它們？

Question

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

從 'react' 匯入 React
從'@react-navigation/native'導入{NavigationContainer}
從 './navigation/GuestNavigator' 導入 GuestNavigator
從 './navigation/AppNavigator' 導入 AppNavigator

const App = () =>; {
 
  const isUserAuthenticated = false;

  返回 （
    <導航容器>
      {用戶已驗證嗎？ （
        >
      ) : (
        >
      )}
    </導航容器>
  ）
}
匯出預設應用程式

<p><strong>---這是訪客模式的導航---</strong></p> <p>---- GuestNavigator.JS -------</p> <pre class="brush:php;toolbar:false;">從 '@react-navigation/bottom-tabs' 匯入 { createBottomTabNavigator }; 從 '../components/TabBar' 導入 TabBar； const Tab = createBottomTabNavigator(); const GuestNavigator = ({ handleLogin }) =>; { 返回 （ ; }> > <Tab.Screen name="SampleNotas" component={SampleNotasScreen} /> <Tab.Screen name=「SampleCuras」元件={SampleCurasScreen} /> <選項卡螢幕 名稱=“登入” 選項={{ tabBarVisible: false }} 孩子們={()=> } >> </Tab.Navigator> ）； }; 導出預設GuestNavigator；</pre> <p><em><strong>--這是認證模式的導航--</strong></em></p>

------ AppNavigator.JS ---------

<pre class="brush:php;toolbar:false;">從 '@react-navigation/bottom-tabs' 匯入 { createBottomTabNavigator }; 從 '../components/TabBar' 導入 TabBar； const Tab = createBottomTabNavigator(); const AppNavigator = () =>; { 返回 （ ; }> <Tab.Screen name="Notas" component={NotasScreen} /> <Tab.Screen name="Curas" component={CurasScreen} /> > > </Tab.Navigator> ）； }; 匯出預設 AppNavigator <p>我還為登入和註冊創建了一個導航系統</p> <p>-------- AuthNavigator.js ----------</p>

從 'react' 匯入 React
從'@react-navigation/native'導入{NavigationContainer}
從 '@react-navigation/stack' 導入 { createStackNavigator }
從 '../screens/AuthScreens/LoginScreen' 導入 LoginScreen
從 '../screens/AuthScreens/RegisterScreen' 導入 RegisterScreen

const Stack = createStackNavigator()

const AuthNavigator = () =>; {
  返回 （
    <導航容器>
      
        <堆疊螢幕
          名稱=“登入”
          組件={登入畫面}
          選項={{
            標頭顯示：假，
          }}
        >>
        <堆疊螢幕
          名稱=“註冊”
          組件={註冊螢幕}
          選項={{
            標題： '註冊'，
          }}
        >>
      </Stack.Navigator>
    </導航容器>
  ）
}

導出預設 AuthNavigator

; <p>當然，如果我從GuestNavigator導航中刪除LoginScrein，我會得到錯誤：</p> <p><strong>錯誤：未處理任何導航器的負載為{"name":"Login"}的動作'NAVIGATE'。 是否有名為「登入」的畫面？ 如果您嘗試導航到導航器中的螢幕，請參閱https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator。 這只是一個開發時的警告，不會在生產中顯示。</strong></p> <p>我還顯示了 TabBar，儘管它顯示了圖標，但這些螢幕沒有添加。----- TabBar.js -----------</p>

從 'react' 匯入 React;
從 'react-native' 導入 { View, TouchableOpacity, Text };
從“react-native-vector-icons/Ionicons”導入圖標；
const TabBar = ({ 狀態, 描述符, 導航, isUserAuthenticated }) =>; {
  返回 （
    <視圖樣式={{ flexDirection: 'row', height: 60, backgroundColor: '#F3F9F5' }}>
      {state.routes.map((路線, 索引) => {
        const { 選項 } = 描述子[route.key];
        const onPress = () =>; {
          const 事件 = navigation.emit({
            類型：'tabPress'，
            目標：路線.key，
          });
          if (!event.defaultPrevented) {
            導航.navigate(路線.名稱);
          }
        };
        const isFocused = state.index === 索引；
        常量顏色= isFocused ？ '#08A438' : '黑色';
        讓圖標名稱；
        if (!isUserAuthenticated) {
          // 邀請時尚圖標
          if (route.name === '家') {
            圖示名稱 = '首頁';
          } else if (route.name === 'SampleNotas') {
            圖示名稱 = '列表';
          } else if (route.name === 'SampleCuras') {
            圖標名稱 = 'medkit';
          } else if (route.name === 'SamplePerfil') {
            圖標名稱 = '人物';
          }
        } 別的 {
          // 驗證方式圖標
          if (route.name === 'Notas') {
            圖標名稱 = '註釋';
          } else if (route.name === 'Curas') {
            圖標名稱 = 'medkit';
          } else if (route.name === 'Recordatorios') {
            圖示名稱 = '鬧鐘';
          } else if (route.name === '個人資料') {
            圖標名稱 = '人物';
          }
        }
        返回 （
          <可觸摸不透明度
            鍵={索引}
            onPress={onPress}
            樣式={{ flex: 1,alignItems: 'center', justifyContent: 'center' }}
          >
            <</code></pre>

Answer 1

要解決這個問題，請像這樣將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中移除登入選項卡。