React Native アプリ内を移動するときに 2 つの画面を追加し、TabBar には表示しないようにするにはどうすればよいですか?-PHP中国語ネットワークQ&A

ユーザー登録とログインインターフェイスをアプリケーションの TabBar に表示しないようにする必要があります。単純なアプリケーションがあり、ゲストモードとユーザー認証モードの 2 種類のユーザーインターフェイスを用意しようとしています。各 authentication 条件のナビゲーションを作成し、アプリケーションの各状態 (ゲストモードまたは認証モード) の TabBar を表示しました。各ナビゲーションのアイコンを表示するための TabBar コンポーネントもあります。

LoginScreen および RegisterScreen 画面にアクセスできないため、これらの画面を追加したいときに問題が発生します。

これらの画面を管理するために 3 番目の Navigation (AuthNavigator) を作成しようとしましたが、最終的にアクセスできるようになりましたが、TabBar に表示されます。しかし、これは許可されていません。これらの画面には TabBar

からアクセスできません。

それらをナビゲーションに表示する必要がありますが、TabBar には表示されません。

これらの画面は TabBar ファイルには追加されないため、アイコン は表示されませんが、タイトル

options={{ tabBarVisible: false }} を使用してみましたが、効果はありませんでした

display = "none" も試しましたが成功しませんでした。

Google で解決策を探しましたが、何も見つかりませんでした。

ナビゲーションシステムのデモンストレーションを行って、何が間違っているか、どのように修正するかを説明したいと思います。

----------- App.js ---------

「react」から React をインポート import { NavigationContainer } から '@react-navigation/native' 「./navigation/GuestNavigator」から GuestNavigator をインポートします 「./navigation/AppNavigator」から AppNavigator をインポートします const App = () => { const isUserAuthenticated = false; 戻る （ <ナビゲーションコンテナ> {ユーザー認証されていますか? (  ):( <ゲストナビゲーター /> )}  ） } デフォルトのアプリをエクスポート

---これは访客モードの导航---

----GuestNavigator.JS -------

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; TabBar を '../components/TabBar' からインポートします。 const Tab = createBottomTabNavigator(); const GuestNavigator = ({ handleLogin }) => { 戻る （  }>    
      <タブ画面 名前="「ログイン」" オプション="{{" tabBarVisible: false }} 子="{()" => <ログイン画面 handleLogin="{handleLogin}" >}> ); }; デフォルトの GuestNavigator;

をエクスポートします。

--これは认证モードの导航--

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

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; TabBar を '../components/TabBar' からインポートします。 const Tab = createBottomTabNavigator(); const AppNavigator = () => { 戻る （  }>        ); }; デフォルトの AppNavigator

をエクスポートします。

我丘は登录および注册创建了一导系航统

------AuthNavigator.js ----------

「react」から React をインポート import { NavigationContainer } から '@react-navigation/native' import { createStackNavigator } から '@react-navigation/stack' 「../screens/AuthScreens/LoginScreen」から LoginScreen をインポートします 「../screens/AuthScreens/RegisterScreen」から RegisterScreen をインポートします const Stack = createStackNavigator() const AuthNavigator = () => { 戻る （ <ナビゲーションコンテナ> <スタックナビゲータ>
      <スタック.スクリーン 名前="「ログイン」" コンポーネント="{ログイン画面}" オプション="{{" headerShow: false、 }}>
      <スタック.スクリーン 名前="「登録」" コンポーネント="{登録画面}" オプション="{{" タイトル:「レジストロ」、 }}>  ） } デフォルトの AuthNavigator

をエクスポートします。

当然、如果我从GuestNavigator导航中删除LoginScrein，我会得错误：

警告: {"name":"Login"} のアクション 'NAVIGATE' は、ナビゲーションツールのダウンロードを処理しません。「ログイン」の画面が有名ですか？プラグインナビゲーションの画面にナビゲーションする場合は、https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator を参照してください。これは起動時の警告であり、生成中には表示されません。

TabBar も表示されますが、これらのスクリーンには追加されていません。----- TabBar.js -----------

React を 'react' からインポートします。 import { View, TouchableOpacity, Text } from 'react-native'; 「react-native-vector-icons/Ionicons」からアイコンをインポートします。 const TabBar = ({ 状態、記述子、ナビゲーション、isUserAuthenticated }) => { 戻る（ {state.routes.map((ルート, インデックス) => { const { オプション } = 記述子[ルートキー]; const onPress = () => { const イベント = Navigation.emit({ タイプ: 'tabPress'、ターゲット: ルート.キー、 }); if (!event.defaultPrevented) { ナビゲーション.ナビゲート(ルート.名); } }; const isFocused = state.index === インデックス; const color = isFocused ? '#08A438' : '黒'; アイコン名を許可します; if (!isUserAuthenticated) { // Iconos para el modo invitado if (route.name === 'ホーム') { iconName = 'ホーム'; } else if (route.name === 'SampleNotas') { iconName = 'リスト'; } else if (route.name === 'SampleCuras') { iconName = 'medkit'; } else if (route.name === 'SamplePerfil') { iconName = '人'; } } それ以外 { // 自動モードのアイコン if (route.name === '注意事項') { iconName = 'メモ'; } else if (route.name === 'Curas') { iconName = 'medkit'; } else if (route.name === 'Recordatorios') { iconName = 'アラーム'; } else if (route.name === 'プロファイル') { iconName = '人'; } } 戻る（ <タッチ可能な不透明度キー={インデックス} onPress={onPress} style={{ flex: 1、alignItems: 'center'、justifyContent: 'center' }} > <