Saltar al contenido

React Native - Creando Navigator dinámicamente con React Navigation

Esta sección fue aprobado por nuestros expertos así garantizamos la exactitud de nuestro tutorial.

Solución:

Su archivo TabStack:

const CATEGORIES = 
  "Food":  screen: FoodStack ,
  // ...


export default (screenNames) => 
  const screens = screenNames.reduce((total, name) => (...total, [name]: CATEGORIES[name]), )
  const TabStack = TabNavigator(screens,
    
        tabBarComponent : props => ,
        tabBarPosition: 'top',
        animationEnabled : true,
        initialRouteName : 'Food',
        swipeEnabled: true,
        tabBarOptions : 

            scrollEnabled : true
        
  )
  return TabStack

Su archivo raíz:

import getTabStack from './TabStack'


class Root extends Component 

    state = 
      categoriesNames: null
    

    componentWillMount() 
      // assuming result is ["Food", "Drink", ... ]
      Api.fetchCategories().then((result) => 
        this.setState( categoriesNames: result )
      )
    

    render() 
      const  categoriesNames  = this.state
      if (!categoriesNames) 
        return 
      
      const TabStack = getTabStack(categoriesNames)
      return (
        
          
        
      );
    
  

Aquí me gustaría publicar un método para crear una barra de pestañas de acuerdo con los datos que obtuvimos de alguna API, etc. de manera programática.

Aquí obtenemos los datos de la API en este ejemplo, este código del componente de nivel superior:

renderShopTab() 
        const  client  = this.props;
        try 
            const  categories  = client.readQuery(
                query: gql`
                
                    categories
                        id
                        name
                        products
                            id
                            name
                            price
                            quantity
                        
                    
                `
            )

            console.log("Categories  :" + categories);

            return (
                
            )

         catch (error) 
            console.log("Error occured creating the categories due to the : " + error);

            return (
                
                    
                        Loading...
                    
                
            )

        

    

Este fragmento de código es del creador de la barra de pestañas de forma dinámica:

export const ShopCreator = ( categories ) => 

    // This script will create a TabNavigator for categories and StackNavigators for each member of the categories !

    let categoryStack = ;

    let routes = ;


    categories.forEach((category) => 

        if (category.products.length > 0) 

            const  catname  = category.name;

            if (category.name != undefined) 

                routes[category.name] = 
                    screen: StackNavigator(
                        'isim': 
                            screen: ProductPage
                        
                    ,
                        headerMode : 'none',
                        initialRouteParams : 
                            categoryName : category.name,
                            products : category.products
                        
                    )
                
            
            
         else 

            console.log("This category has no products !");

        

    )

    console.log("OHA : " + JSON.stringify(routes));

    const ShopCatTabNav = TabNavigator(routes, 
        tabBarPosition: 'top',
        tabBarComponent: props => 
    )

    return 

Como último, le mostraré la barra de navegación de pestañas personalizada que construí:

const TabMenuItems = (props) => 

    const  activeTintColor, tab, tabbar, tabText, inactiveTintColor  = styles;
    const  index  = props.navigation.state;
    return(
        
        
        
            props.navigation.state.routes.length ? (
                props.navigation.state.routes.map((route,number)=>
                    const focused = ( index === number ) ? '#1874CD' : '#FF6A6A';
                    const tintColor = focused ? activeTintColor : inactiveTintColor;
                    return (
                         
                                props.jumpToIndex(number)
                            
                            delayPressIn=0
                            >
                            
                                
                                props.getLabel(route, number)
                                
                            
                        
                    )
                )
            ) : null
        
    
    
    )


export default TabMenuItems;

valoraciones y comentarios

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada.