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