Crear un TabNavigator con pestañas dinámicas

Hola, hallamos la solución a lo que estabas buscando, has scroll y la verás más abajo.

Solución:

¡Síiii! Creo que encontré una manera. La solución probablemente no esté siguiendo el patrón de diseño, pero esto es lo que se me ocurrió:

export default class DynamicTabBar extends React.Component 
    static router = TabRouter(
        Start: 
            screen: UserStackNavigator,
            navigationOptions: 
                tabBarIcon: (),
            ,
        ,
        ...Account.User.CanEnter ? 
            ConditionalTab: 
                screen: ConditionalScreen,
                navigationOptions: 
                    tabBarIcon: (),
                ,
             : ,
        Settings: 
            screen: Settings,
            navigationOptions: 
                tabBarIcon: (),
            
        
    ,
        ...TabNavigator.Presets.AndroidTopTabs,
        tabBarPosition: "bottom",
        tabBarOptions: 
            activeTintColor: '#eaeb65',
            showIcon: true,
            showLabel: false,
            style:  backgroundColor: '#333' ,
        
    );
    constructor(props) 
        super(props);
    

    render() 
        const tabs = TabNavigator(
            Start: 
                screen: UserStackNavigator,
                navigationOptions: 
                    tabBarIcon: (),
                ,
            ,
            ...Account.User.CanEnter ? 
                ConditionalTab: 
                    screen: ConditionalScreen,
                    navigationOptions: 
                        tabBarIcon: (),
                    ,
                 : ,
            Settings: 
                screen: Settings,
                navigationOptions: 
                    tabBarIcon: (),
                
            
        ,
            ...TabNavigator.Presets.AndroidTopTabs,
            tabBarPosition: "bottom",
            tabBarOptions: 
                activeTintColor: '#eaeb65',
                showIcon: true,
                showLabel: false,
                style:  backgroundColor: '#333' ,
            
        );

        return ;
    

El enrutador se asigna en un static y se construye dinámicamente en tiempo de ejecución.

Sé que esto es antiguo, pero AFAICT aún no existe una manera bendecida de hacerlo, en 2019. Esta es la solución que se me ocurrió, y creo que es bastante simple.

Básicamente, especifico una costumbre tabBarComponent con una costumbre getButtonComponent método que representa el botón o no en función del usuario actual. Si el usuario no debería ver el elemento de navegación, muestra una vista vacía, lo que tiene el efecto de ocultar el elemento de navegación.

import  createBottomTabNavigator  from 'react-navigation'
import  BottomTabBar  from 'react-navigation-tabs'

class TabBar extends React.Component 
  render() 
    return (
      
    )
  

  getButtonComponent( route ) 
    if (route.key === 'Other') 
      return () =>  // a view that doesn't render its children
     else 
      return null // use the default nav button component
    
  


const AppNav = createBottomTabNavigator(
  
    Home: HomeStack,
    Other: OtherScreen,
  ,
  
    tabBarComponent: TabBar,
  
)

valoraciones y comentarios

Si guardas algún reparo o capacidad de aumentar nuestro artículo eres capaz de realizar una nota y con deseo lo ojearemos.

---

---

Utiliza Nuestro Buscador