React Native 앱에서 탐색할 때 두 개의 화면을 추가하지만 TabBar에는 표시하지 않는 방법은 무엇입니까?
P粉155551728
P粉155551728 2023-08-20 10:44:44
0
1
702
<p>사용자 등록 및 로그인 인터페이스가 애플리케이션의 <code>TabBar</code>에 표시되지 않도록 해야 합니다. 저는 간단한 애플리케이션을 갖고 있으며 두 가지 유형의 사용자 인터페이스를 사용하려고 합니다. 하나는 게스트 모드이고 다른 하나는 사용자 인증 모드입니다. 게스트 모드 또는 인증 모드 등 애플리케이션의 각 상태에 대한 TabBar를 표시하기 위해 각 <code>인증</code> 조건에 대한 탐색을 만들었습니다. 또한 각 탐색에 대한 아이콘을 표시하는 <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>아이콘</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;">'react'에서 React 가져오기 '@react-navigation/native'에서 { NavigationContainer }를 가져옵니다. './navigation/GuestNavigator'에서 GuestNavigator 가져오기 './navigation/AppNavigator'에서 AppNavigator 가져오기 const 앱 = () => { const isUserAuthenticated = false; 반품 ( <NavigationContainer> {사용자 인증됨? ( <AppNavigator /> ) : ( <GuestNavigator /> )} </NavigationContainer> ) } 기본 앱 내보내기</pre> <p><strong>---这是访客模式的导航---</strong></p> <p>---- GuestNavigator.JS -------</p> <pre class="brush:php;toolbar:false;">'@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 내보내기;</pre> <p><em><strong>--这是认证模式的导航--</strong></em></p> <p>------ AppNavigator.JS ---------</p> <pre class="brush:php;toolbar:false;">'@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 내보내기</pre> <p>저희는 登录과 注册创建了一个导航系统</p> <p>------- AuthNavigator.js ----------</p> <pre class="brush:php;toolbar:false;">'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 내보내기</pre> <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를 이용하고 있습니다.----- TabBar.js -----------</p> <pre><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></pre>
P粉155551728
P粉155551728

모든 응답(1)
P粉014218124

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

으아악

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

으아악

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿