Cómo hacer la barra de pestaña dinámica reactr ntaive

Tengo una página principal con tres fichas en mi app. Y el usuario puede iniciar sesión en tres modos: vendedor, comprador y conductor. Pero cuando el usuario entra como conductor, quiero mostrar dos barras. Este es mi código fuente de navegación de pestañas:

const Home = createStackNavigator(
    {
        HomeScreen: {
            screen: HomeScreen,
            navigationOptions: {
                headerShown: false,
            }
        },
        
    },
    {
        initialRouteName: 'HomeScreen',
    }
);

const ShoppingCart = createStackNavigator(
    {
        ShoppingCartScreen: {
            screen: ShoppingCartScreen,
            navigationOptions: {
                headerShown: false,
            }
        },
        
    },
    {
        initialRouteName: 'ShoppingCartScreen',
    }
);

const OrderHistory = createStackNavigator(
    {
        ProfileScreen: {
            screen: ProfileScreen,
            navigationOptions: {
                headerShown: false,
            }
        },
    },
    {
        initialRouteName: 'ProfileScreen',
    }
);

const TabNavigation = createBottomTabNavigator(
    {
        Home,
        ShoppingCart,
        OrderHistory,
    },
    {
        defaultNavigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
                const { routeName } = navigation.state;
                //   let IconComponent = Icon;
                //   let iconName;
                
                    return 
                }
            },
        }),
        tabBarOptions: {
            activeTintColor: 'white',
            showLabel: false,               
            labelStyle: {
                marginTop: -10,
                marginBottom: 10,
                fontSize: 15,
            },
        },
    },
);


export default createAppContainer(TabNavigation);

Y este es el código fuente RootNavigation.

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import TabBarScreen from './TabBarNavigation'

const AuthStack = createStackNavigator(
    {
        LoginScreen: {
            screen: LoginScreen,
            navigationOptions: {
                headerShown: false
            }
        },
        SignUpScreen: {
            screen: SignUpScreen,
            navigationOptions: {
                headerShown: false
            }
        },
        ForgotPasswordScreen: {
            screen: ForgotPasswordScreen,
            navigationOptions: {
                headerShown: false
            }
        },
        DispensariesSignupScreen: {
            screen: DispensariesSignupScreen,
            navigationOptions: {
                headerShown: false
            }
        },
        DriverSignupScreen: {
            screen: DriverSignupScreen,
            navigationOptions: {
                headerShown: false
            }
        },
    },
    {
        initialRouteName: 'LoginScreen'
    }
)

const AppStack = createStackNavigator({
    Tabbar: {
        screen: TabBarScreen,
        navigationOptions: {
            headerShown: false
        }
    },
})

// const App = createAppContainer(RootNavigation);
// export default App;


export default createAppContainer(
    createSwitchNavigator(
        {
            Splash: SplashScreen,
            Auth: AuthStack,
            App: AppStack
        },
        {
            initialRouteName: 'Splash'
        }
    )
);

Así que cuando el usuario entra como conductor, quiero mostrar sólo dos bar: ShoppingCart, OrderHistory, ¿Cómo puedo hacer la barra de pestañas dinámicamente?

Pregunta hecha hace 3 años, 4 meses, 29 días - Por scriptsculptorbf10

2 Respuestas:

  • Para hacer que la barra de pestañas reaccione de forma dinámica cuando un usuario entra como conductor y solo mostrar las pestañas de ShoppingCart y OrderHistory, puedes agregar lógica condicional en la creación de tu TabNavigation.

    Aquí tienes un ejemplo de cómo podrías modificar tu código para lograr esto:

    jsx
const TabNavigation = createBottomTabNavigator(
    {
        ShoppingCart: {
            screen: ShoppingCart,
        },
        OrderHistory: {
            screen: OrderHistory,
        },
    },
    {
        defaultNavigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
                const { routeName } = navigation.state;
                // Puedes personalizar los iconos aquí si es necesario
            }
        }),
        tabBarOptions: {
            activeTintColor: 'white',
            showLabel: false,               
            labelStyle: {
                marginTop: -10,
                marginBottom: 10,
                fontSize: 15,
            },
        },
    }
);

export default createAppContainer(TabNavigation);

    En este código, hemos eliminado la pestaña Home de la navegación de pestañas y solo hemos incluido las pestañas ShoppingCart y OrderHistory. De esta forma, cuando el usuario ingrese como conductor, solo se mostrarán esas dos pestañas en la barra de navegación.

    Además, en el componente RootNavigation, asegúrate de pasar las pestañas correctas dependiendo del tipo de usuario que haya iniciado sesión.

    Espero que este cambio te ayude a lograr lo que estás buscando. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 18, 2020 a las 00:00 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para mostrar dinámicamente las barras de pestañas según el tipo de usuario, puedes utilizar la propiedad navigationOptions de cada pantalla en la pila de navegación de pestañas. Aquí tienes un ejemplo modificado de tu código:

    javascript
const TabNavigation = createBottomTabNavigator(
  {
    Home,
    ShoppingCart,
    OrderHistory,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        //   let IconComponent = Icon;
        //   let iconName;

        if (routeName === 'Home') {
          return ;
        } else if (routeName === 'ShoppingCart') {
          return ;
        } else if (routeName === 'OrderHistory') {
          return ;
        }
      },
    }),
    tabBarOptions: {
      activeTintColor: 'white',
      showLabel: false,
      labelStyle: {
        marginTop: -10,
        marginBottom: 10,
        fontSize: 15,
      },
    },
  },
);

// Crea una función para determinar las barras de pestañas dinámicas según el tipo de usuario
const getTabBarOptions = (userType) => {
  if (userType === 'conductor') {
    return {
      tabBarVisible: false,
    };
  } else {
    return {
      tabBarVisible: true,
    };
  }
};

// Envuelve la pila de navegación de pestañas con una pila de navegación que permite pasar el tipo de usuario
const AppStack = createStackNavigator({
  Tabbar: {
    screen: TabNavigation,
    navigationOptions: ({ navigation }) => getTabBarOptions(navigation.getParam('userType')),
  },
});

// Crea un AppContainer que pasa el tipo de usuario como parámetro a la pila de navegación de la aplicación
const App = createAppContainer(AppStack);
export default App;

    En este código:

    La función getTabBarOptions determina las opciones de barra de pestañas (visibilidad) según el tipo de usuario. La pila de navegación AppStack envuelve la pila de navegación de pestañas TabNavigation y pasa el tipo de usuario como parámetro.

    • El `AppContainer` envuelve la pila de navegación `AppStack` y pasa el tipo de usuario como parámetro a la pantalla de pestañas.

    Al utilizar este enfoque, puedes mostrar dinámicamente las barras de pestañas según el tipo de usuario que ha iniciado sesión.

    Respondida el Dec 18, 2020 a las 00:06 - por Gemini

    Votos positivos: 0 | Votos negativos: 0