Meu Primeiro App com React Native - #15 Bottom Tabs

Nesse tutorial aprenderemos como inserir uma bottom tab navigator na área restrita do nosso App.

Bottom Tab no React Native

Vamos primeiramente instalar o módulo da barra inferior no nosso app:

npm install @react-navigation/material-bottom-tabs react-native-paper

Aproveitaremos também e instalaremos o módulo de ícones:

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

arearestrita/AreaRestrita.js

Vamos chamar o módulo para exibir a barra na nossa área restrita:

import React, {useState,useEffect} from 'react';
import {Text, View, Button} from 'react-native';
import {css} from '../../assets/css/Css';
import AsyncStorage from '@react-native-community/async-storage';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import {Profile,Cadastro,Edicao} from '../index';
import Icon from 'react-native-vector-icons/FontAwesome';

export default function AreaRestrita() {

    const Tab = createMaterialBottomTabNavigator();
    const [user,setUser]=useState(null);

    useEffect(()=>{
        async function getUser()
        {
            let response=await AsyncStorage.getItem('userData');
            let json=JSON.parse(response);
            setUser(json.name);
        }
        getUser();
    },[]);

    return (
        <Tab.Navigator
                activeColor='#999'
                inactiveColor='#fff'
                barStyle={css.area__tab}
        >
            <Tab.Screen
                    name="Profile"
                    component={Profile}
                    options={{
                    tabBarIcon:()=>(
                        <Icon name="users" size={20} color="#999" />
                    )
                }}
            />
            <Tab.Screen
                    name="Cadastro"
                    component={Cadastro}
                    options={{
                    tabBarIcon:()=>(
                        <Icon name="archive" size={20} color="#999" />
                    )
                }}
            />
            <Tab.Screen
                    name="Edicao"
                    component={Edicao}
                    options={{
                    tabBarIcon:()=>(
                        <Icon name="edit" size={20} color="#999" />
                    )
                }}
            />
        </Tab.Navigator>
    );
}

Criaremos também três componentes dentro da pasta views/arearestrita:
- Cadastro.js
- Profile.js
- Edicao.js

Vamos fazer uma estrutura básica pra esses componentes:

import React, {useState,useEffect} from 'react';
import {Text, View, Button} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

export default function Profile() {

    return (
        <View>
            <Text>Profile</Text>
        </View>
    );
}

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com