Meu Primeiro App com React Native - #16 Menu e Componentização

Nessa videoaula criaremos um menu customizado na parte superior do nosso app, dando a opção do usuário deslogar do sistema.

Custom Menu com React Native

App.js

O primeiro passo é retirar a barra padrão do app. Para isso, vamos alterar o nosso componente raiz App.js acrescentando a option headerShown:

<Stack.Screen name="AreaRestrita" options={{headerShown:false}} component={AreaRestrita} />

views/arearestrita/Profile.js

O nosso arquivo profile será o primeiro a receber o menu superior customizado:

import React, {useState,useEffect} from 'react';
import {Text, View, TouchableOpacity} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {css} from '../../assets/css/Css';
import Icon from 'react-native-vector-icons/FontAwesome';
import MenuAreaRestrita from "../../assets/components/MenuAreaRestrita";

export default function Profile({navigation}) {
    return (
        <View style={[css.container, css.containerTop]}>
            <MenuAreaRestrita title='Perfil' navigation={navigation} />
        </View>
    );
}

assets/css/Css.js

Iremos implementar novas classes CSS no nosso projeto também:

 area__menu:{
    flexDirection: 'row',
    paddingTop: 40,
    paddingBottom: 10,
    width: '100%',
    backgroundColor:'#111',
    alignItems:'center',
    justifyContent:'center'
},
button__home2:{
    textAlign:'left'
},
area__title:{
    width: '80%',
    fontWeight:'bold',
    fontSize:20,
    color:'#fff',
    textAlign:'center'
},
button__logout:{
    textAlign:'right'
}

components/MenuAreaRestrita.js

Para realizar a reutilização do código criaremos um componente externo para abrigar o menu superior, assim quando precisarmos fazer alguma alteração o menu alteramos apenas um arquivo.

import React from 'react';
import {Text, TouchableOpacity, View} from "react-native";
import {css} from "../css/Css";
import Icon from 'react-native-vector-icons/FontAwesome';
import AsyncStorage from "@react-native-community/async-storage";

export default function MenuAreaRestrita(props)
{
    async function logout()
    {
        await AsyncStorage.clear();
        props.navigation.navigate('Login');
    }

    return (
        <View style={css.area__menu}>
            <TouchableOpacity style={css.button__home2} onPress={()=>props.navigation.navigate('Home')}>
                <Icon name="home" size={20} color="#999" />
            </TouchableOpacity>

            <Text style={css.area__title}>{props.title}</Text>

            <TouchableOpacity style={css.button__logout} onPress={()=>logout()}>
                <Icon name="sign-out" size={20} color="#999" />
            </TouchableOpacity>
        </View>
    );
}

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

Precisa de aulas particulares? webdesignemfoco@gmail.com