Después de que el usuario haya iniciado sesión, el código llamará a: navigation.navigate('Dashboard'); para navegar hasta el tablero y mostrar el menú de la pestaña inferior. Sin embargo, esto no está funcionando. ¿Cómo navego de nuevo desde la página de inicio de sesión al menú de mi pestaña?
Si elimino la const navigation = useNavigation(); todavía no funciona
Esta es la aplicación.js:
export default function App() { const navigation = useNavigation(); useEffect(() => { auth.onAuthStateChanged(user => { navigation.navigate('MyTabs'); // alert("Should go dash"); }) }, []) if (1 == 1){ return ( <LoginScreen /> ); } return ( <MyTabs /> ); }Este es mi menú de pestaña inferior:
const Tab = createBottomTabNavigator(); const dashboardName = "Dashboard"; const activitesName = "Activities"; const friendsName = "Friends"; function MyTabs() { return ( <NavigationContainer> <Tab.Navigator initialRouteName={dashboardName} screenOptions={({route}) => ({ tabBarIcon: ({focused, color, size}) => { let iconName; let rn = route.name; if(rn === dashboardName) { iconName = 'stats-chart'; } else if (rn === friendsName) { iconName = 'person'; } else { iconName = 'calendar'; } return <Ionicons name={iconName} size={size} color={color} /> }, tabBarStyle:{ height:60, backgroundColor: '#000000' }, tabBarItemStyle:{ activeTintColor: '#5DB075' } })} tabBarOptions={{ activeTintColor: '#5DB075', inactiveTintColor: '#ffffff', labelStyle: { paddingBottom: 10, fontSize: 10, outerHeight: 100}, }} > <Tab.Screen name={activitesName} component={Activities} /> <Tab.Screen name={dashboardName} component={Dashboard} /> <Tab.Screen name={friendsName} component={Friends} /> </Tab.Navigator> </NavigationContainer> ); }Ni la App ni el inicio de Login se encuentran en un navegador dentro del contenedor de navegación. Esto no puede funcionar. Necesita un flujo de trabajo de autenticación que represente condicionalmente la pantalla de inicio de sesión o todas las demás pantallas. No se necesita navegación (y no funciona en este caso).
Esta es la forma recomendada de solucionar esto de acuerdo con react-native-navigation .
const Tab = createBottomTabNavigator(); const dashboardName = "Dashboard"; const activitesName = "Activities"; const friendsName = "Friends"; export default const App = () => { const [isSignedIn, setSignedIn] = useState() React.useEffect(() => { const unsubscribe = firebase.auth().onAuthStateChanged((user) => { setSignedIn(user ? true : false) }); return unsubscribe; }, []) return ( <NavigationContainer> <Tab.Navigator initialRouteName={dashboardName} screenOptions={({route}) => ({ tabBarIcon: ({focused, color, size}) => { let iconName; let rn = route.name; if(rn === dashboardName) { iconName = 'stats-chart'; } else if (rn === friendsName) { iconName = 'person'; } else { iconName = 'calendar'; } return <Ionicons name={iconName} size={size} color={color} /> }, tabBarStyle:{ height:60, backgroundColor: '#000000' }, tabBarItemStyle:{ activeTintColor: '#5DB075' } })} tabBarOptions={{ activeTintColor: '#5DB075', inactiveTintColor: '#ffffff', labelStyle: { paddingBottom: 10, fontSize: 10, outerHeight: 100}, }} > { isSignedIn ? ( <> <Tab.Screen name={activitesName} component={Activities} /> <Tab.Screen name={dashboardName} component={Dashboard} /> <Tab.Screen name={friendsName} component={Friends} /> </> ) : ( <> <Tab.Screen name={"Login"} component={LoginScreen} /> </> ) } </Tab.Navigator> </NavigationContainer> ); } En su pantalla de inicio de LoginScreen , es posible que desee ocultar la barra de TabBar que ahora está visible.
const LoginScreen = ({navigation}) => { useLayoutEffect(() => { navigation.setOptions({ tabBarStyle: { display: 'none' } }); }, [navigation]) ...