Em um navegador da web, você pode criar links para várias páginas usando uma tag âncora <a>. Quando o usuário clica em um link, o URL é enviado para a pilha do histórico do navegador. Quando o usuário clica no botão voltar, o navegador exibe o item do topo da pilha do histórico, de modo que a página atual agora é a página visitada anteriormente.
O React Native não possui um conceito embutido de uma pilha de histórico global como um navegador da web; é aqui que o React Navigation é útil. O navegador de pilha do React Navigation implementa uma maneira de seu aplicativo fazer a transição entre as telas e manter o histórico de navegação. Uma variação significativa entre como isso é executado em um navegador da Web e o React Navigation é que o navegador de pilha do React Navigation produz os gestos e animações que você precisaria em dispositivos Android e iOS ao navegar entre rotas ou telas na pilha.
Existem 3 navegadores principais que acompanham o React Navigation, que são adequados para projetos baseados em iOS e Android.
O navegador mais comum que você encontrará, um navegador Stack navegará de tela para tela de forma hierárquica: Para configurar um navegador de pilha, declare um objeto de navegador de pilha por meio da função createStackNavigator. A partir daqui, os componentes Navigator e Screen podem ser usados para incorporar e agrupar as telas desejadas.
import { View, Text, Button } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; function Home({ navigation }) { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home screen</Text> <Button title="Go to Profile" onPress={() => navigation.navigate('Profile')} /> </View> ); } function Profile() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Profile screen</Text> </View> ); } const Stack = createStackNavigator(); function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={Home} /> <Stack.Screen name="Profile" component={Profile} /> </Stack.Navigator> </NavigationContainer> ); } export default App;
Possivelmente, o estilo mais comum de navegação em aplicativos móveis é a navegação baseada em guias. Podem ser guias na parte inferior da tela ou na parte superior da tela.
O exemplo a seguir demonstra como construir um navegador de guias inferiores:
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; function HomeScreen() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home!</Text> </View> ); } function SettingsScreen() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Settings!</Text> </View> ); } const Tab = createBottomTabNavigator(); export default function App() { return ( <NavigationContainer> <Tab.Navigator initialRouteName="HomeScreen" screenOptions={{ tabBarActiveTintColor: '#e91e63', }}> <Tab.Screen name="HomeScreen" component={HomeScreen} options={{ tabBarLabel: 'Home', tabBarIcon: ({ color, size }) => ( <MaterialCommunityIcons name="home" color={color} size={size} /> ), }} /> <Tab.Screen name="SettingsScreen" component={SettingsScreen} options={{ tabBarLabel: 'Profile', tabBarIcon: ({ color, size }) => ( <MaterialCommunityIcons name="account" color={color} size={size} /> ), }} /> </Tab.Navigator> </NavigationContainer> ); }
Outro navegador útil que permite que as telas sejam animadas de um lado da tela a ser revelada e animadas de volta quando fechadas.
import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createDrawerNavigator } from '@react-navigation/drawer'; function Feed() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Feed Screen</Text> </View> ); } function Notifications() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Notifications Screen</Text> </View> ); } function Profile() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Profile Screen</Text> </View> ); } const Drawer = createDrawerNavigator(); function MyDrawer() { return ( <Drawer.Navigator useLegacyImplementation initialRouteName="Feed"> <Drawer.Screen name="Feed" component={Feed} options={{ drawerLabel: 'Home' }} /> <Drawer.Screen name="Notifications" component={Notifications} options={{ drawerLabel: 'Updates' }} /> <Drawer.Screen name="Profile" component={Profile} options={{ drawerLabel: 'Profile' }} /> </Drawer.Navigator> ); } export default function App() { return ( <NavigationContainer> <MyDrawer /> </NavigationContainer> ); }
Nos capítulos seguintes temos tutorias com exercícios práticos para reforçar o aprendizado dos elementos utilizados para programar em React Native a navegação entre telas de apps.
Crie um aplicativo React Native com uma navegação em pilha. O aplicativo deve ter duas telas: Home e Detalhes. Na tela Home, exiba um botão "Ir para Detalhes". Quando o botão for clicado, o aplicativo deve navegar para a tela Detalhes. Na tela Detalhes, exiba um botão "Voltar para Home". Ao clicar no botão, o aplicativo deve voltar para a tela Home.
Abra o arquivo App.js e substitua o código existente pelo seguinte:
import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './src/screens/HomeScreen'; import DetailsScreen from './src/screens/DetailsScreen'; const Stack = createStackNavigator(); const App = () => { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); }; export default App;
Crie um diretório src/screens e adicione os seguintes arquivos:
Arquivo src/screens/HomeScreen.js
:
import { View, Text, Button } from 'react-native'; const HomeScreen = ({ navigation }) => { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Ir para Detalhes" onPress={() => navigation.navigate('Details')} /> </View> ); }; export default HomeScreen;
Arquivo src/screens/DetailsScreen.js
:
import { View, Text, Button } from 'react-native'; const DetailsScreen = ({ navigation }) => { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Tela de Detalhes</Text> <Button title="Voltar para Home" onPress={() => navigation.goBack()} /> </View> ); }; export default DetailsScreen;
Execute o aplicativo no seu dispositivo usando Expo.
Agora você deve ter um aplicativo React Native com navegação em pilha. A tela inicial exibirá o conteúdo da tela Home e um botão "Ir para Detalhes". Ao clicar no botão, o aplicativo navegará para a tela Detalhes, onde será exibido o conteúdo da tela e um botão "Voltar para Home". Ao clicar no botão, o aplicativo voltará
Crie um aplicativo React Native com uma navegação em gaveta (drawer). O aplicativo deve ter três telas: Home, Perfil e Configurações. Na tela Home, exiba um botão de menu que, quando clicado, abre o drawer com as opções "Perfil" e "Configurações". Ao selecionar uma opção no drawer, o aplicativo deve navegar para a tela correspondente. Adicione um botão "Voltar para Home" em cada tela para permitir a navegação de volta para a tela Home.
No arquivo App.js, adicione as seguintes linhas no topo do arquivo:
import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; import { HomeScreen } from './src/screens/HomeScreen' import { ProfileScreen } from './src/screens/ProfileScreen' import { SettingsScreen} from './src/screens/SettingsScreen'
Neste passo, estamos importando os componentes necessários para configurar a navegação em gaveta no nosso aplicativo. O createDrawerNavigator
é um componente fornecido pelo pacote @react-navigation/drawer, que nos permite criar um menu de navegação em gaveta. O NavigationContainer
é o componente de nível superior fornecido pelo pacote @react-navigation/native que envolve toda a nossa navegação.
Crie um diretório src/screens e adicione os seguintes arquivos:
Arquivo src/screens/HomeScreen
import { View, Text } from 'react-native'; const HomeScreen = () => ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> </View> ); export default HomeScreen;
Arquivo src/screens/ProfileScreen
import { View, Text } from 'react-native'; const ProfileScreen = () => ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Profile Screen</Text> </View> ); export default ProfileScreen;
Arquivo src/screens/SettingsScreen
import { View, Text } from 'react-native'; const SettingsScreen = () => ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Settings Screen</Text> </View> ); export default SettingsScreen;
Neste passo, estamos criando três telas básicas: HomeScreen
, ProfileScreen
e SettingsScreen
. Cada tela é um componente de função que retorna um JSX contendo um elemento View que exibe um texto.
No arquivo App.js, adicione o seguinte código para criar o componente do Drawer Navigator:
const Drawer = createDrawerNavigator(); const App = () => ( <NavigationContainer> <Drawer.Navigator useLegacyImplementation initialRouteName="Home"> <Drawer.Screen name="Home" component={HomeScreen} /> <Drawer.Screen name="Profile" component={ProfileScreen} /> <Drawer.Screen name="Settings" component={SettingsScreen} /> </Drawer.Navigator> </NavigationContainer> ); export default App;
Neste passo, estamos criando um componente Drawer usando createDrawerNavigator()
e configurando o initialRouteName
para "Home". Em seguida, estamos adicionando as telas ao
usando Drawer.Screen
. Cada tela é mapeada pelo nome da tela e seu respectivo componente.
O NavigationContainer envolve o componente Drawer.Navigator e é responsável por fornecer o contexto de navegação para a nossa aplicação.
Agora, você terá um aplicativo com navegação em gaveta (drawer navigation). A tela inicial exibirá o texto "Home Screen". Ao tocar no ícone de menu no canto superior esquerdo, você verá as opções "Profile" e "Settings". Ao selecionar uma opção, o aplicativo navegará para a tela correspondente.
No início, o aplicativo exibe a tela "Home Screen". Ao tocar no ícone do menu no canto superior esquerdo, o menu em gaveta é exibido, mostrando as opções "Profile" e "Settings". Ao selecionar a opção "Profile", o aplicativo navega para a tela "Profile Screen". Da mesma forma, selecionar a opção "Settings" leva o aplicativo para a tela "Settings Screen". O usuário pode navegar entre as telas tocando nas opções do menu ou usando o botão voltar do dispositivo para retornar à tela anterior. Experimente tocar nas diferentes opções do drawer para ver a navegação em ação.
Crie um aplicativo React Native com uma navegação em abas (tabs). O aplicativo deve ter três telas: Feed, Explorar e Notificações. Na parte inferior do aplicativo, exiba uma barra de navegação com as opções "Feed", "Explorar" e "Notificações". Ao selecionar uma opção na barra de navegação, o aplicativo deve exibir o conteúdo correspondente à tela selecionada. Adicione um botão "Voltar para Feed" em cada tela para permitir a navegação de volta para a tela Feed.
Vamos criar as telas e configurar a navegação em abas. Crie um diretório chamado src na raiz do projeto. Dentro do diretório src, crie um diretório chamado screens.
Dentro do diretório screens, crie três arquivos: FeedScreen.js, ExploreScreen.js e NotificationsScreen.js. Esses arquivos conterão o código das respectivas telas.
Abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:
Arquivo App.js
import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import FeedScreen from './src/screens/FeedScreen'; import ExploreScreen from './src/screens/ExploreScreen'; import NotificationsScreen from './src/screens/NotificationsScreen'; const Tab = createBottomTabNavigator(); const App = () => { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="Feed" component={FeedScreen} /> <Tab.Screen name="Explorar" component={ExploreScreen} /> <Tab.Screen name="Notificações" component={NotificationsScreen} /> </Tab.Navigator> </NavigationContainer> ); }; export default App;
Aqui, importamos os componentes necessários do React Navigation e as telas que criamos. Em seguida, definimos um Tab.Navigator dentro do NavigationContainer. Dentro do Tab.Navigator, usamos Tab.Screen para definir as telas e seus respectivos nomes.
Agora, vamos implementar o código das telas.
Abra o arquivo FeedScreen.js dentro do diretório src/screens e adicione o seguinte código:
Arquivo src/screens/FeedScreen
import { View, Text, Button } from 'react-native'; const FeedScreen = ({ navigation }) => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Feed Screen</Text> <Button title="Explorar" onPress={() => navigation.navigate('Explorar')} /> </View> ); }; export default FeedScreen;
Aqui, importamos os componentes necessários do React Native. A tela FeedScreen é uma função de componente que recebe o parâmetro navigation (usado para navegar entre as telas). No retorno da função, exibimos um texto simples e um botão que navega para a tela "Explorar" ao ser pressionado.
Repita o passo 2 para as telas ExploreScreen.js e NotificationsScreen.js. Use o código a seguir para as respectivas telas:
Arquivo src/screens/ExploreScreen.js
import { View, Text, Button } from 'react-native'; const ExploreScreen = ({ navigation }) => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Explore Screen</Text> <Button title="Voltar para Feed" onPress={() => navigation.navigate('Feed')} /> </View> ); }; export default ExploreScreen;
Arquivo src/screens/NotificationsScreen.js:
import { View, Text, Button } from 'react-native'; const NotificationsScreen = ({ navigation }) => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Notifications Screen</Text> <Button title="Voltar para Feed" onPress={() => navigation.navigate('Feed')} /> </View> ); }; export default NotificationsScreen;
Neste exercício, você irá personalizar o cabeçalho de um navegador Stack em um aplicativo React Native.
Crie um arquivo chamado HomeScreen.js no diretório src/screens. Este será o componente de tela inicial para o exemplo.
Arquivo src/screens/HomeScreen
import React from 'react'; import { View, Text } from 'react-native'; const HomeScreen = () => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home Screen</Text> </View> ); }; export default HomeScreen;
Em seguida, abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:
Arquivo /App.js
import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './src/screens/HomeScreen'; const Stack = createStackNavigator(); const App = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Página Inicial', headerStyle: { backgroundColor: '#f4511e', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }} /> </Stack.Navigator> </NavigationContainer> ); }; export default App;
Neste código, importamos os componentes necessários do React Navigation e as telas. Em seguida, definimos um Stack.Navigator dentro do NavigationContainer. Dentro do Stack.Navigator, usamos Stack.Screen para definir a tela inicial, especificando opções de cabeçalho personalizadas.
Neste exercício, você irá personalizar o cabeçalho de um navegador Tab em um aplicativo React Native. Crie um arquivo chamado HomeScreen.js no diretório src/screens. Este será o componente de tela inicial para o exemplo.
Arquivo src/screens/HomeScreen
import { View, Text } from 'react-native'; const HomeScreen = () => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home Screen</Text> </View> ); }; export default HomeScreen;
Em seguida, abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:
import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import HomeScreen from './src/screens/HomeScreen'; const Tab = createBottomTabNavigator(); const App = () => { return ( <NavigationContainer> <Tab.Navigator screenOptions={{ headerStyle: { backgroundColor: '#f4511e', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }} > <Tab.Screen name="Home" component={HomeScreen} options={{ title: 'Página Inicial', }} /> </Tab.Navigator> </NavigationContainer> ); }; export default App;
Neste código, importamos os componentes necessários do React Navigation e as telas. Em seguida, definimos um Tab.Navigator dentro do NavigationContainer. Definimos as opções de cabeçalho personalizadas no screenOptions do Tab.Navigator para serem aplicadas a todas as telas do navegador Tab.
Neste exercício, você irá personalizar o cabeçalho de um navegador Drawer em um aplicativo React Native.
Crie um arquivo chamado HomeScreen.js no diretório src/screens. Este será o componente de tela inicial para o exemplo.
Arquivo src/screens/HomeScreen
import { View, Text } from 'react-native'; const HomeScreen = () => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home Screen</Text> </View> ); }; export default HomeScreen;
Em seguida, abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:
import { NavigationContainer } from '@react-navigation/native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import HomeScreen from './src/screens/HomeScreen'; const Drawer = createDrawerNavigator(); const App = () => { return ( <NavigationContainer> <Drawer.Navigator useLegacyImplementation screenOptions={{ headerStyle: { backgroundColor: '#f4511e', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }} > <Drawer.Screen name="Home" component={HomeScreen} options={{ title: 'Página Inicial', }} /> </Drawer.Navigator> </NavigationContainer> ); }; export default App;
Neste código, importamos os componentes necessários do React Navigation e as telas. Em seguida, definimos um Drawer.Navigator dentro do NavigationContainer. Definimos as opções de cabeçalho personalizadas no screenOptions do Drawer.Navigator para serem aplicadas a todas as telas do navegador Drawer.
Neste exercício, você irá criar uma navegação aninhada com um Stack Navigator dentro de um Tab Navigator em um aplicativo React Native.
Crie os seguintes arquivos para as telas dentro do diretório src/screens:
HomeScreen.js:
import { View, Text, Button } from 'react-native'; const HomeScreen = ({ navigation }) => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Details" onPress={() => navigation.navigate('Details')} /> </View> ); }; export default HomeScreen;
DetailsScreen.js:
import { View, Text, Button } from 'react-native'; const DetailsScreen = ({ navigation }) => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Details Screen</Text> <Button title="Go to Profile" onPress={() => navigation.navigate('Profile')} /> </View> ); }; export default DetailsScreen;
ProfileScreen.js:
import { View, Text, Button } from 'react-native'; const ProfileScreen = ({ navigation }) => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Profile Screen</Text> <Button title="Go back to Home" onPress={() => navigation.goBack()} /> </View> ); }; export default ProfileScreen;
Abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:
import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './src/screens/HomeScreen'; import DetailsScreen from './src/screens/DetailsScreen'; import ProfileScreen from './src/screens/ProfileScreen'; const Tab = createBottomTabNavigator(); const Stack = createStackNavigator(); const HomeStack = () => { return ( <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> ); }; const App = () => { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="HomeStack" component={HomeStack} /> <Tab.Screen name="Profile" component={ProfileScreen} /> </Tab.Navigator> </NavigationContainer> ); }; export default App;
Neste código, importamos os componentes necessários do React Navigation, as telas e criamos os navegadores Tab e Stack. O navegador Stack contém as telas Home e Details, enquanto o navegador Tab contém o navegador Stack HomeStack e a tela Profile.
Neste exercício, você irá criar uma navegação aninhada com um Drawer Navigator dentro de um Stack Navigator em um aplicativo React Native.
Crie os seguintes arquivos para as telas dentro do diretório src/screens:
HomeScreen.js:
import { View, Text, Button } from 'react-native'; const HomeScreen = ({ navigation }) => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Details" onPress={() => navigation.navigate('Details')} /> </View> ); }; export default HomeScreen;
DetailsScreen.js:
import { View, Text } from 'react-native'; const DetailsScreen = ({ navigation }) => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Details Screen</Text> </View> ); }; export default DetailsScreen;
ProfileScreen.js:
import { View, Text } from 'react-native'; const ProfileScreen = ({ navigation }) => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Profile Screen</Text> </View> ); }; export default ProfileScreen;
Abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:
import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { createDrawerNavigator } from '@react-navigation/drawer'; import HomeScreen from './src/screens/HomeScreen'; import DetailsScreen from './src/screens/DetailsScreen'; import ProfileScreen from './src/screens/ProfileScreen'; const Stack = createStackNavigator(); const Drawer = createDrawerNavigator(); const HomeStack = () => { return ( <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> ); }; const App = () => { return ( <NavigationContainer> <Drawer.Navigator useLegacyImplementation> <Drawer.Screen name="HomeStack" component={HomeStack} /> <Drawer.Screen name="Profile" component={ProfileScreen} /> </Drawer.Navigator> </NavigationContainer> ); }; export default App;
Neste código, importamos os componentes necessários do React Navigation, as telas e criamos os navegadores Stack e Drawer. O navegador Stack contém as telas Home e Details, enquanto o navegador Drawer contém o navegador Stack HomeStack e a tela Profile.
Criar um app com o seguinte esquema de navegação