es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Pestañas inferiores de material. Ir a cualquier pestaña utilizando el índice.

28 Jul, 2023 Programación

Estoy usando este código y funciona bien, crea las pestañas como quiero. Pero quiero poder cambiar las pestañas usando un índice para poder agregar algún índice o pantalla en el redux y redirigirme a esa pestaña. No puedo encontrar nada relacionado con esto en este paquete como en los otros paquetes. Déjame saber si alguien puede ayudarme. Estoy obteniendo algo inusual. He declarado una matriz de gancho de estado. En eso estoy agregando algunos datos. Y cada vez que hago una consola, muestra vacío. Por favor, revisa y déjame saber si alguien tiene una solución para esto.

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
    return (
      <tab.navigator>
          <tab.screen name="Home" component="{HomeScreen}"></tab.screen>
          <tab.screen name="Settings" component="{SettingsScreen}"></tab.screen>
      </tab.navigator>
    );
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar las pestañas utilizando un índice en react-navigation-bottom-tab, puedes agregar un listener tabBarOnPress al navegador y utilizar el método jumpTo para navegar a la pestaña deseada. Aquí tienes un ejemplo:

    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {

  const jumpToScreen = (index) => {
    const route = Object.values(Tab.getCurrentState().routeMap).find(route => route.key.includes(`tab${index}`))
    if (route) {
      Tab.dispatch(state => {
        // Esto devolverá un array con la misma longitud que el número de navegadores
        const routes = state.routes.map(innerState => {
          // Esto devolverá un array con la misma longitud que el número de pantallas en el navegador
          const innerRoutes = innerState.state.routes.map(innerRoute => {
            if (innerRoute.key === route.key) {
              return {
                ...innerRoute,
                params: { screen: route.name },
              };
            } else {
              return innerRoute;
            }
          });
          return {
            ...innerState.state,
            routes: innerRoutes,
            stale: true,
          };
        });
        return {
          ...state,
          routes,
          index,
        };
      });
    }
  }

  return (
    <tab.navigator tabbaroptions="{{" activetintcolor:="" 'tomato',="" inactivetintcolor:="" 'gray',="" }}="" tabbaronpress="{({navigation," route})=""> {
        jumpToScreen(route.key.replace('tab', ''));
        navigation.navigate(route.name);
      }}
    >
      <tab.screen name="Home" component="{HomeScreen}"></tab.screen>
      <tab.screen name="Settings" component="{SettingsScreen}"></tab.screen>
    </tab.navigator>
  );
}

    En cuanto a tu array de estado state hook, es difícil decir sin ver el código. Normalmente, si estás añadiendo datos a un array de estado state hook, debería mostrarse en console.log. Asegúrate de que estás actualizando correctamente el estado con la función set y no mutando el array directamente. También puedes comprobar si no estás reinicializando el array accidentalmente cada vez que el componente se renderiza.

Comments are closed.