Tutorial App Delivery – React Native + API – Part 4: Bottom Tab Navigation

Hola, en este tutorial vamos a construir como hacer una barra de navegación en el inferior. Primero que todo vamos a crear 4 componentes para cada vista: Food (Principal), Cart ( Carrito), Address ( Direccion ) y Profile (Perfil).

src/Address.js

import React, { Component } from 'react';
import { Text, View, TextInput, TouchableOpacity } from 'react-native';

export default class Address extends Component {

  constructor(props) {
     super(props);
     this.state = {
       data:"",
     };
  }
  
  render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
         <Text>Address</Text>
      </View>
    );
  }
}

src/Cart.js

import React, { Component } from 'react';
import { Text, View, TextInput, TouchableOpacity } from 'react-native';

export default class Cart extends Component {

  constructor(props) {
     super(props);
     this.state = {
       data:"",
     };
  }

  render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
         <Text>Cart food</Text>
      </View>
    );
  }
}

src/Profile.js

import React, { Component } from 'react';
import { Text, View, TextInput, TouchableOpacity } from 'react-native';

export default class Profile extends Component {

  constructor(props) {
     super(props);
     this.state = {
       data:"",
     };
  }

  render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
         <Text>Profile</Text>
      </View>
    );
  }
}

src/Food.js
index.js to Food.js

Tab Bar

Instalar iconos

https://github.com/oblador/react-native-vector-icons

npm install --save react-native-vector-icons

src/index.js

Import

import React, { Component } from 'react';
import { Text, View, TextInput, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
var { width } = Dimensions.get("window")

// import Components
import Food from './Food'
import Cart from './Cart'
import Address from './Address'
import Profile from './Profile'
// unable console yellow
console.disableYellowBox = true;
// import icons
import Icon from 'react-native-vector-icons/Ionicons';

state

  constructor(props) {
     super(props);
     this.state = {
       module:1,
     };
  }

render

render() {
    return (
      <View style={{flex:1}}>
         {
          this.state.module==1? <Food />
          :this.state.module==2? <Cart />
          :this.state.module==3? <Address />
          :<Profile />
         }
         <View style={styles.bottomTab}>
           <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:1})}>
             <Icon name="md-restaurant" size={30} color={this.state.module==1?"#900":"gray"} />
             <Text>Food</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:2})}>
             <Icon name="md-basket" size={30} color={this.state.module==2?"#900":"gray"} />
             <Text>Cart</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:3})}>
             <Icon name="md-map" size={30} color={this.state.module==3?"#900":"gray"} />
             <Text>Address</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:4})}>
             <Icon name="md-contact" size={30} color={this.state.module==4?"#900":"gray"} />
             <Text>Profile</Text>
           </TouchableOpacity>
         </View>
      </View>
    );
  }

styles

const styles = StyleSheet.create({
  bottomTab:{
    height:60,
    width:width,
    backgroundColor:'orange',
    flexDirection:'row',
    justifyContent:'space-between',
    elevation:8,
    shadowOpacity:0.3,
    shadowRadius:50,
  },
  itemTab:{
    width:width/4,
    backgroundColor:'white',
    alignItems:'center',
    justifyContent:'center'
  }
})

Full source font in index.js

import React, { Component } from 'react';
import { Text, View, TextInput, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
var { width } = Dimensions.get("window")

// import Components
import Food from './Food'
import Cart from './Cart'
import Address from './Address'
import Profile from './Profile'
// unable console yellow
console.disableYellowBox = true;
// import icons
import Icon from 'react-native-vector-icons/Ionicons';

export default class App extends Component {

  constructor(props) {
     super(props);
     this.state = {
       module:1,
     };
  }

  render() {
    return (
      <View style={{flex:1}}>
         {
          this.state.module==1? <Food />
          :this.state.module==2? <Cart />
          :this.state.module==3? <Address />
          :<Profile />
         }
         <View style={styles.bottomTab}>
           <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:1})}>
             <Icon name="md-restaurant" size={30} color={this.state.module==1?"#900":"gray"} />
             <Text>Food</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:2})}>
             <Icon name="md-basket" size={30} color={this.state.module==2?"#900":"gray"} />
             <Text>Cart</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:3})}>
             <Icon name="md-map" size={30} color={this.state.module==3?"#900":"gray"} />
             <Text>Address</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:4})}>
             <Icon name="md-contact" size={30} color={this.state.module==4?"#900":"gray"} />
             <Text>Profile</Text>
           </TouchableOpacity>
         </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bottomTab:{
    height:60,
    width:width,
    backgroundColor:'orange',
    flexDirection:'row',
    justifyContent:'space-between',
    elevation:8,
    shadowOpacity:0.3,
    shadowRadius:50,
  },
  itemTab:{
    width:width/4,
    backgroundColor:'white',
    alignItems:'center',
    justifyContent:'center'
  }
})

2 comentarios sobre “Tutorial App Delivery – React Native + API – Part 4: Bottom Tab Navigation”

  1. Muy bien tu tutorial, ganó un fan, estoy siguiendo la creación de la aplicación. Esperando los próximos videos.

    ps. Soy Brasileño

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *