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.

Resolução

Passo 1: Configuração da navegação em pilha

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;

Passo 2: Criação das telas Home e Details

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;

Passo 3: Execução do aplicativo

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.

Resolução

Passo 1: Importação dos componentes

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.

Passo 2: Configuração das telas

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.

Passo 3: Configuração do Drawer Navigator

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.

Passo 4: Execução do aplicativo

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.

Resolução

Passo 1: Configurando a navegação

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.

Passo 2: Implementando as telas

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.

Passo 1: Criando as telas

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;

Passo 2: Configurando a navegação aninhada

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.

Passo 1: Criando as telas

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;

Passo 2: Configurando a navegação aninhada

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