[Rick and Morty Characters Wiki] — Parte 2.2 — Configuração— React Navigation
Caso tenha caído aqui por acidente, essa é a parte 1 de uma serie de posts para implementação de uma aplicação inspirada no post Rick and Morty Character Wiki do Joy Shaeb:
Vamos começar instalando em nosso projeto as dependências do React Navigation:
# instalando as dependências no projeto
yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/bottom-tabs @react-navigation/native-stack
# instalando as dependências para ios
cd ios && pod install
Como estamos trabalhando com o Bare React Native, para o android é preciso um passo a mais, explicado neste link.
Vamos criar a estrutura inicial de navegação do nosso projeto, então dentro da pasta “src”:
No arquivo src/screens/Characters/index.tsx:
import React from 'react';
import { Text, View } from 'react-native';
const Characters = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Characters Screen</Text>
</View>
);
};
export default Characters;
No arquivos src/routes/index.tsx:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Ionicons from 'react-native-vector-icons/Ionicons';
/**
* Essa importação foi feita utilizando absolut import, no final desse post
* tem um link para o artigo do Henrique Tavares com o passo a passo
* de implementação.
**/
import Characters from '~/screens/Characters';
export type RootStackParamList = {
BottomRoutes: undefined;
};
export type RootBottomParamList = {
Characters: undefined;
};
export const BottomRoutes = () => {
const Tab = createBottomTabNavigator<RootBottomParamList>();
return (
<Tab.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName="Characters">
<Tab.Screen
name="Characters"
component={Characters}
options={{
tabBarLabel: 'Characters',
tabBarIcon: ({ color, size }) => (
<Ionicons name="person" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
};
export const Routes = () => {
const Stack = createNativeStackNavigator<RootStackParamList>();
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Group>
<Stack.Screen name="BottomRoutes" component={BottomRoutes} />
</Stack.Group>
</Stack.Navigator>
</NavigationContainer>
);
};
No arquivos src/routes/global.tsx:
import { RootStackParamList, RootBottomParamList } from '.';
declare global {
namespace ReactNavigation {
interface RootParamList extends RootBottomParamList, RootStackParamList {}
}
}
Atualizando o App.tsx:
import React from 'react';
import { StatusBar } from 'react-native';
// Importatação das rotas que acabamos de criar
import { Routes } from './routes';
import './config';
const App = () => {
return (
<>
<StatusBar barStyle={'dark-content'} />
<Routes />
</>
);
};
export default App;
Assim teremos:
Em seguida vamos configurar nosso tema com styled-components, continua no 2.3