Criando um projeto pessoal, me deparei com a necessidade de fazer uma barra de navegação para meu app, com isso me veio a idéia de pesquisar uma forma de adicionar isso na minha aplicação e deixá-la muito mais profissional. Mostrarei a você neste tutorial como criar essa barra de navegação inferior personalizada e animada usando o React Navigation.
Criando o projeto -
Assim como no título deste artigo informa,antes de começarmos, é necessário ter o ambiente de desenvolvimento do React Native configurado em sua máquina. Em seguida, você pode criar um novo projeto React Native executando o seguinte comando:
npx create-expo-app --template
A opção acima irá fornecer escolhas como aplicação por padrão Blank, Blank com Typescript e outros, selecione a padrão. O nome ficará a seu critério. Chamarei meu projeto de TabSlide.
Devemos também instalar as seguintes dependências:
npm install @react-navigation/native
npm install @react-navigation/bottom-tabs
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
Feito isso, podemos começar a criar a barra de menu criando o seguinte componente:
import React from "react";
import { View } from "react-native";
import { blue, grey } from "../../styles";
import { AntDesign } from "@expo/vector-icons";
type Props = {
iconName: string;
isCurrent?: boolean;
};
export const BottomMenuItem = ({ iconName, isCurrent }: Props) => {
return (
<View
style={{
height: "100%",
justifyContent: "center",
alignItems: "center",
}}
>
<AntDesign
name={iconName}
size={32}
style={{ color: isCurrent ? blue : grey }}
/>
</View>
);
};
Você pode ajustar este componente como quiser. Utilizamos um iconName para exibir o ícone correto e uma propriedade isCurrent que altera a cor do ícone se estiver selecionado no momento. Para indicar se em que parte aba da barra de navegação estaremos.
Customizando o componente TabBar -
import React, { useState } from "react";
import {
View,
TouchableOpacity,
Dimensions,
StyleSheet,
} from "react-native";
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import { BottomMenuItem } from "./BottomMenuItem";
import { blue } from "../../styles";
export const TabBar = ({
state,
descriptors,
navigation,
}: BottomTabBarProps) => {
const totalWidth = Dimensions.get("window").width;
const tabWidth = totalWidth / state.routes.length;
return (
<View style={[style.tabContainer, { width: totalWidth }]}>
<View style={{ flexDirection: "row" }}>
<View style={style.slider}/>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: "tabPress",
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
const onLongPress = () => {
navigation.emit({
type: "tabLongPress",
target: route.key,
});
};
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityStates={isFocused ? ["selected"] : []}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1 }}
key={index}
>
<BottomMenuItem
iconName={label.toString()}
isCurrent={isFocused}
/>
</TouchableOpacity>
);
})}
</View>
</View>
);
};
const style = StyleSheet.create({
tabContainer: {
height: 60,
shadowOffset: {
width: 0,
height: -1,
},
shadowOpacity: 0.1,
shadowRadius: 4.0,
backgroundColor: "white",
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
elevation: 10,
position: "absolute",
bottom: 0,
},
slider: {
height: 5,
position: "absolute",
top: 0,
left: 10,
backgroundColor: blue,
borderRadius: 10,
width: 50
},
});
Fizemos a importação do componente de criação da barra, e adicionamos uma customização a ele no caso acima.
Conectando o TabBar personalizado ao sistema de navegação -
import React from "react";
import {
createBottomTabNavigator,
BottomTabBarProps,
} from "@react-navigation/bottom-tabs";
import { TabBar } from "./TabBar";
import { AppsScreen } from "../../screens/AppsScreen";
import { DashboardScreen } from "../../screens/DashboardScreen";
import { GroupScreen } from "../../screens/GroupScreen";
import { ProfileScreen } from "../../screens/ProfileScreen";
import { useSafeArea } from "react-native-safe-area-context";
import { View } from "react-native";
export const BottomMenu = () => {
const Tab = createBottomTabNavigator();
return (
<View style={{ flex: 1, position: "relative"}}>
<Tab.Navigator
tabBar={(props: BottomTabBarProps) => <TabBar {...props} />}
>
<Tab.Screen name="search1" component={AppsScreen} />
<Tab.Screen name="dashboard" component={DashboardScreen} />
<Tab.Screen name="profile" component={GroupScreen} />
<Tab.Screen name="user" component={ProfileScreen} />
</Tab.Navigator>
{useSafeArea().bottom > 0 && (
<View
style={{
height: useSafeArea().bottom - 5,
backgroundColor: "white",
}}
/>
)}
</View>
);
};
Acima foi feita conexão entre as abas onde cada aba será uma nova navegação clicável.
Nossa aplicação ficará parecida com isso:
Neste artigo você aprendeu como criar barras de navegação animadas, espero que ele tenha o ajudado. O restante de criação ficará por sua criatividade. Obrigado por ler.
Top comments (0)