Um Guia Completo para Reagir a Navegação Nativa Usando a Navegação Reagir

Introdução

Reagir Nativo permite a construção de aplicativos móveis nativos com JavaScript e Reagir. Um aspecto crítico do desenvolvimento de aplicativos móveis é a navegação: orientar os usuários através de diferentes telas e recursos de forma perfeita. Reagir Navegação[] é a biblioteca mais popular, orientada pela comunidade para implementar navegação em aplicativos Nativos Reagir. Ele fornece uma API declarativa, suporta navegadores de pilha, tab e gaveta, e lida com gestos e transições específicos de plataforma. Este guia abrange tudo, desde a instalação até padrões avançados, como fluxos de ligação e autenticação profundos.

Pré-requisitos e Instalação

Antes de usar a Navegação React, certifique- se de que tem um projecto React Native inicializado. Se estiver a começar de novo, use o React Native CLI ou a Expo. React Navigation funciona com ambos.

Instalar os Pacotes Principais

Instale os pacotes necessários através do npm ou do fio. A biblioteca principal e as suas principais dependências são:

npm install @react-navigation/native

Em seguida, instale as bibliotecas de suporte que React Navegação depende para gerenciamento de tela e gerenciamento de área segura:

npm install react-native-screens react-native-safe-area-context

Se você estiver usando Expo, estas bibliotecas já estão incluídas. Para projetos nativos de Reagir nus, siga as instruções de ligação na documentação oficial para garantir que os módulos nativos estão conectados corretamente (o link automático lida com isso para Reagir nativos 0,60+).

Instalar um Navegador

A navegação por reação oferece vários navegadores. O navegador de pilha nativo [[FLT: 0]] é recomendado para a maioria dos casos de uso:

npm install @react-navigation/native-stack

Outros navegadores como tabulações de fundo e arrasta são instalados separadamente:

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

Conceitos Principais

A navegação React é construída em torno de três blocos principais:

Cada configuração de navegação deve ser envolto em um . Este recipiente é tipicamente colocado na raiz do componente de aplicação.

Configurar um Navegador de Pilha

O navegador de pilha gerencia uma pilha de telas de última entrada. Ele usa animações e gestos de transição da plataforma nativa por padrão.

Em primeiro lugar, importar módulos necessários:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Criar uma instância de navegação de pilha:

const Stack = createNativeStackNavigator();

Defina o navegador dentro do componente do aplicativo:

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Cada requer um adereço (utilizado para navegação) e um adereço (o componente React a renderizar).

Criando telas e navegando

Os ecrãs são componentes de Reacção padrão. Eles recebem dois acessórios importantes: e . O objecto fornece métodos para se mover entre ecrãs. Abaixo está um ecrã inicial típico:

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

A tela Detalhes não precisa usar o suporte de navegação a menos que precise navegar mais.

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

Métodos de navegação

A navegação por reação fornece vários métodos através do prop:

Por exemplo, para empurrar uma nova instância da tela Detalhes e passar parâmetros:

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

Passando Parâmetros Entre Telas

Os dados podem ser passados para uma tela através do segundo argumento para ou . A tela receptora acessa esses parâmetros através de .

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

Definir valores de parâmetros padrão usando [[FLT: 22]] no componente de tela:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

Configurar as Opções de Navegação

Cada tela pode personalizar seu cabeçalho, ícone de tabulação, etiqueta da gaveta, etc., usando o prop em ou o prop no navegador.

Personalização do Cabeçalho

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

As opções dinâmicas podem ser definidas usando uma função que recebe :

options={({ route }) => ({ title: route.params.name })}

Navegador de Páginas

A navegação de tabulações é comum para as secções de aplicações de topo. Instale o navegador de tabulações de baixo:

npm install @react-navigation/bottom-tabs

Crie um navegador de tabulação e combine-o com sua pilha:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

Você pode aninhar o navegador de tabulação dentro de um navegador de pilha ou vice-versa. Personalize ícones de tabulação usando o com .

Navegador de gavetas

Um navegador de gavetas desliza uma gaveta da esquerda, revelando itens de navegação. Instale-a:

npm install @react-navigation/drawer

Configuração do exemplo:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

Use para abrir e fechar a gaveta de forma programática.

Navegadores aninhados

Aplicações complexas frequentemente navegam por ninhos (por exemplo, um navegador de páginas dentro de um navegador de pilha). Reagir Navegação lida com aninhamento graciosamente. O prop fornecido a qualquer tela pode chamar métodos em um navegador pai, se necessário. Use ] para acessar os métodos do navegador pai.

Exemplo: Uma pilha contendo um navegador de tabulação e uma tela de configurações:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

Ligação e ligação profunda

A navegação de reação suporta links profundos para URLs de manipulação que abrem telas específicas. Configure o prop em :

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

Depois, trate dos URLs recebidos. Isto permite funcionalidades como notificações de push a ligar a uma tela específica.

Fluxos de Autenticação

Muitos aplicativos requerem navegação condicional baseada no estado de autenticação. Um padrão comum é mudar o navegador no nível raiz:

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

Alternativamente, use uma única pilha com telas condicionais. Evite piscar mantendo a promessa ou o estado atualizado.

Desempenho e boas práticas

Conclusão

A navegação por reação fornece uma forma intuitiva, personalizável e performante de gerenciar a navegação em aplicativos nativos por reação. Ao dominar a pilha, tabulação, gaveta e navegadores aninhados, junto com fluxos de passagem de parâmetros, ligação profunda e autenticação, você pode construir experiências móveis robustas. Para mais detalhes, consulte a documentação oficial de navegação por reação e o guia de navegação nativa . Considere também ler artigos da comunidade sobre ] Reagir as melhores práticas de navegação para refinar suas implementações.