React Native 앱에서 탐색할 때 두 개의 화면을 추가하지만 TabBar에는 표시하지 않는 방법은 무엇입니까?

Question

사용자 등록 및 로그인 인터페이스가 애플리케이션의 TabBar에 표시되지 않도록 해야 합니다. 저는 간단한 애플리케이션을 갖고 있으며 두 가지 유형의 사용자 인터페이스를 사용하려고 합니다. 하나는 게스트 모드이고 다른 하나는 사용자 인증 모드입니다. 게스트 모드 또는 인증 모드 등 애플리케이션의 각 상태에 대한 TabBar를 표시하기 위해 각 인증 조건에 대한 탐색을 만들었습니다. 또한 각 탐색에 대한 아이콘을 표시하는 TabBar 구성요소도 있습니다.

LoginScreen 및 RegisterScreen 화면에 액세스할 수 없기 때문에 이 문제가 발생합니다.

이 화면을 관리하기 위해 세 번째 Navigation(AuthNavigator)를 만들어서 결국 액세스 권한을 얻었지만 TabBar에 표시됩니다. 그러나 이는 허용되지 않습니다. 이 화면은 TabBar

에서 액세스할 수 없습니다.

내비게이션에는 있어야 하지만 TabBar에는 표시되지 않아야 합니다.

이러한 화면은 TabBar 파일에 추가되지 않으므로 아이콘은 표시되지 않지만 제목

options={{ tabBarVisible: false }}를 사용해 보았으나 효과가 없었습니다

display = "none"도 시도했지만 성공하지 못했습니다.

Google에서 해결책을 찾았지만 아무것도 찾지 못했습니다.

제가 뭘 잘못하고 있는지, 실수를 바로잡는 방법을 알려주는 내비게이션 시스템을 보여드리고 싶습니다.

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

'react'에서 React 가져오기
'@react-navigation/native'에서 { NavigationContainer }를 가져옵니다.
'./navigation/GuestNavigator'에서 GuestNavigator 가져오기
'./navigation/AppNavigator'에서 AppNavigator 가져오기

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

  반품 (
    <NavigationContainer>
      {사용자 인증됨? (
        <AppNavigator />
      ) : (
        <GuestNavigator />
      )}
    </NavigationContainer>
  )
}
기본 앱 내보내기

---这是访客模式的导航---

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

'@react-navigation/bottom-tabs'에서 { createBottomTabNavigator } 가져오기;
'../comComponents/TabBar'에서 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 }}
        어린이={() => <LoginScreen handlerLogin={handleLogin} />}
      />
    </Tab.Navigator>
  );
};
기본 GuestNavigator 내보내기;

--这是认证模式的导航--

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

'@react-navigation/bottom-tabs'에서 { createBottomTabNavigator } 가져오기;
'../comComponents/TabBar'에서 TabBar를 가져옵니다.
const Tab = createBottomTabNavigator();

const AppNavigator = () => {
  반품 (
    <Tab.Navigator tabBar={props => <TabBar {...props} />}>
      <Tab.Screen name="Notas" 컴포넌트={NotasScreen} />
      <Tab.Screen name="CrearNota" 구성요소={CrearNotaScreen} 옵션={{ tabBarVisible: false }} />
      <Tab.Screen name="Curas" 컴포넌트={CurasScreen} />
      <Tab.Screen name="Recordatorios" 구성요소={RecordatoriosScreen}/>
      <Tab.Screen name="Profile" 구성요소={ProfileScreen} />
      <Tab.Screen name="EditProfile" 구성요소={EditarProfileScreen} 옵션={{ tabBarVisible: false }} />
    </Tab.Navigator>
  );
};
기본 AppNavigator 내보내기

저희는 登录과 注册创建了一个导航系统

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

'react'에서 React 가져오기
'@react-navigation/native'에서 { NavigationContainer }를 가져옵니다.
'@react-navigation/stack'에서 가져오기 { createStackNavigator }
'../screens/AuthScreens/LoginScreen'에서 LoginScreen 가져오기
'../screens/AuthScreens/RegisterScreen'에서 RegisterScreen 가져오기

const 스택 = createStackNavigator()

const AuthNavigator = () => {
  반품 (
    <NavigationContainer>
      <Stack.Navigator>
        <스택.화면
          이름="로그인"
          구성요소={LoginScreen}
          옵션={{
            헤더표시: false,
          }}
        />
        <스택.화면
          이름="등록"
          구성요소={RegisterScreen}
          옵션={{
            제목: '등록',
          }}
        />
      </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를 이용하고 있습니다.----- TabBar.js -----------

<code>'react'에서 React를 가져옵니다.
import { View, TouchableOpacity, Text } from 'react-native';
'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({
            유형: '탭프레스',
            대상: Route.key,
          });
          if (!event.defaultPrevented) {
            Navigation.navigate(경로.이름);
          }
        };
        const isFocused = state.index === 인덱스;
        const 색상 = isFocused ? '#08A438' : '검은색';
        아이콘이름을 보자;
        if (!isUserAuthenticated) {
          // Iconos para el modo invitado
          if (route.name === '집') {
            아이콘이름 = '집';
          } else if (route.name === 'SampleNotas') {
            아이콘이름 = '목록';
          } else if (route.name === 'SampleCuras') {
            iconName = '메디킷';
          } else if (route.name === 'SamplePerfil') {
            iconName = '사람';
          }
        } 또 다른 {
          // Iconos para el modo autenticado
          if (route.name === 'Notas') {
            iconName = '메모';
          } else if (route.name === 'Curas') {
            iconName = '메디킷';
          } else if (route.name === 'Recordatorios') {
            iconName = '알람';
          } else if (route.name === '프로필') {
            iconName = '사람';
          }
        }
        반품 (
          <터치 가능한 불투명도
            키={색인}
            onPress={onPress}
            스타일={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
          >
            <</code>

Answer 1

이 문제를 해결하려면 다음과 같이 Guestnavigator를 AuthNavigator에 추가하세요.

으아악

리팩터링 App.js을 다음으로:

으아악

그리고 GuestNavigator에서 로그인 탭을 제거하는 것도 잊지 마세요.