React Native アプリ内を移動するときに 2 つの画面を追加し、TabBar には表示しないようにするにはどうすればよいですか?

Question

ユーザー登録とログイン インターフェイスをアプリケーションの 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;

  戻る （
    <ナビゲーションコンテナ>
      {ユーザー認証されていますか? (
        <AppNavigator />
      ):(
        <ゲストナビゲーター />
      )}
    </NavigationContainer>
  ）
}
デフォルトのアプリをエクスポート

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

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

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
TabBar を '../components/TabBar' からインポートします。

const Tab = createBottomTabNavigator();

const GuestNavigator = ({ handleLogin }) => {
  戻る （
    <Tab.Navigator tabBar={props => <TabBar {...props} />}>
      <Tab.Screen name="ホーム" コンポーネント={ホームスクリーン} />
      <Tab.Screen name="SampleNotas" コンポーネント={SampleNotasScreen} />
      <Tab.Screen name="SampleCuras" コンポーネント={SampleCurasScreen} />
      <Tab.Screen name="SamplePerfil" コンポーネント={SamplePerfilScreen} />
      <タブ画面
        名前=「ログイン」
        オプション={{ tabBarVisible: false }}
        子={() => <ログイン画面 handleLogin={handleLogin} />}
      />
    </Tab.Navigator>
  );
};
デフォルトの GuestNavigator;

をエクスポートします。

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

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

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
TabBar を '../components/TabBar' からインポートします。
const Tab = createBottomTabNavigator();

const AppNavigator = () => {
  戻る （
    <Tab.Navigator tabBar={props => <TabBar {...props} />}>
      <Tab.Screen name="Notas" コンポーネント={NotasScreen} />
      <Tab.Screen name="CrearNota" コンポーネント={CrearNotaScreen} options={{ tabBarVisible: false }} />
      <Tab.Screen name="Curas" コンポーネント={CurasScreen} />
      <Tab.Screen name="Recordatorios" コンポーネント={RecordatoriosScreen}/>
      <Tab.Screen name="プロファイル" コンポーネント={ProfileScreen} />
      <Tab.Screen name="EditProfile" コンポーネント={EditarProfileScreen} options={{ tabBarVisible: false }} />
    </Tab.Navigator>
  );
};
デフォルトの 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、
          }}
        />
        <スタック.スクリーン
          名前=「登録」
          コンポーネント={登録画面}
          オプション={{
            タイトル:「レジストロ」、
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  ）
}

デフォルトの AuthNavigator

をエクスポートします。

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

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

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

<code>React を 'react' からインポートします。
import { View, TouchableOpacity, Text } from 'react-native';
「react-native-vector-icons/Ionicons」からアイコンをインポートします。
const TabBar = ({ 状態、記述子、ナビゲーション、isUserAuthenticated }) => {
  戻る （
    <View style={{ flexDirection: 'row'、高さ: 60、backgroundColor: '#F3F9F5' }}>
      {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' }}
          >
            <</code>

Answer 1

この問題を解決するには、次のように Guestnavigator を AuthNavigator に追加します。

リーリー

App.js を次のようにリファクタリングします:

リーリー

そして、GuestNavigator からログイン タブを削除することを忘れないでください。