22/11/23, 16:07 DrawerLayoutAndroid · Reagir nativo
GavetaLayoutAndroid
Componente React que envolve a plataforma DrawerLayout (somente Android). A
gaveta (normalmente usada para navegação) é renderizada renderNavigationView e os
filhos diretos são a visualização principal (para onde vai o seu conteúdo). A visualização
de navegação inicialmente não é visível na tela, mas pode ser puxada pela lateral da
janela especificada pela drawerPosition propriedade e sua largura pode ser definida
pela drawerWidth propriedade.
Texto datilografado JavaScript
[Link] 1/6
22/11/23, 16:07 DrawerLayoutAndroid · Reagir nativo
DrawerLayoutAndroid Component Example
import React, {useRef, useState} from 'react';
import { Download Expo Go and scan
Button, the QR code to get started.
DrawerLayoutAndroid,
Text,
StyleSheet,
View,
} from 'react-native';
const App = () => {
const drawer = useRef<DrawerLayoutAndroid>(null);
const [drawerPosition, setDrawerPosition] =
useState<'left' | 'right'>(
'left',
);
const changeDrawerPosition = () => {
if (drawerPosition === 'left') {
setDrawerPosition('right');
} else {
setDrawerPosition('left');
}
};
const navigationView = () => (
<View style={[[Link],
[Link]]}>
<Text style={[Link]}>I'm in the Drawer!
Connected devices 0
</Text>
<Button
title="Close drawer"
Log in to open this Snack from Expo Go on
onPress={() => [Link]?.closeDrawer()} your device or simulator.
/>
Preview My Device Android
Referência
Ver
Herda adereços de visualização .
drawerBackgroundColor
[Link] 2/6
22/11/23, 16:07 DrawerLayoutAndroid · Reagir nativo
Especifica a cor de fundo da gaveta. O valor padrão é white . Se quiser definir a
opacidade da gaveta, use rgba. Exemplo:
return (
<DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
);
TIPO OBRIGATÓRIO
cor Não
drawerLockMode
Especifica o modo de bloqueio da gaveta. A gaveta pode ser bloqueada em 3 estados:
desbloqueado (padrão), o que significa que a gaveta responderá (abrir/fechar) aos
gestos de toque.
trancada-fechada, o que significa que a gaveta permanecerá fechada e não
responderá aos gestos.
trancada aberta, o que significa que a gaveta permanecerá aberta e não
responderá aos gestos. A gaveta ainda pode ser aberta e fechada
programaticamente ( openDrawer / closeDrawer ).
TIPO OBRIGATÓRIO
enum('desbloqueado', 'bloqueado-fechado', 'bloqueado-aberto') Não
drawerPosition
Especifica o lado da tela a partir do qual a gaveta deslizará. Por padrão, está definido
como left .
TIPO OBRIGATÓRIO
enum('esquerda', 'direita') Não
[Link] 3/6
22/11/23, 16:07 DrawerLayoutAndroid · Reagir nativo
drawerWidth
Especifica a largura da gaveta, mais precisamente a largura da vista que será puxada da
borda da janela.
TIPO OBRIGATÓRIO
número Não
keyboardDismissMode
Determina se o teclado é dispensado em resposta a um arrasto.
'none' (o padrão), arrastar não dispensa o teclado.
'on-drag', o teclado é descartado quando um arrasto começa.
TIPO OBRIGATÓRIO
enum('nenhum', 'ao arrastar') Não
onDrawerClose
Função chamada sempre que a visualização de navegação é fechada.
TIPO OBRIGATÓRIO
função Não
onDrawerOpen
Função chamada sempre que a visualização de navegação é aberta.
TIPO OBRIGATÓRIO
função Não
[Link] 4/6
22/11/23, 16:07 DrawerLayoutAndroid · Reagir nativo
onDrawerSlide
Função chamada sempre que há interação com a visualização de navegação.
TIPO OBRIGATÓRIO
função Não
onDrawerStateChanged
Função chamada quando o estado da gaveta é alterado. A gaveta pode estar em 3
estados:
inativo, o que significa que não há interação com a visualização de navegação
acontecendo no momento
arrastando, o que significa que há atualmente uma interação com a visualização de
navegação
se acomodando, significando que houve uma interação com a visualização de
navegação, e a visualização de navegação está agora finalizando sua animação de
fechamento ou abertura
TIPO OBRIGATÓRIO
função Não
renderNavigationView
A visualização de navegação que será renderizada na lateral da tela e pode ser
acessada.
TIPO OBRIGATÓRIO
função Sim
statusBarBackgroundColor
[Link] 5/6
22/11/23, 16:07 DrawerLayoutAndroid · Reagir nativo
Faça a gaveta ocupar a tela inteira e desenhe o plano de fundo da barra de status para
permitir que ela abra sobre a barra de status. Isso só terá efeito na API 21+.
TIPO OBRIGATÓRIO
cor Não
closeDrawer()
closeDrawer();
Fecha a gaveta.
openDrawer()
openDrawer();
Abre a gaveta.
Esta página é útil?
Edite essa página
Última atualização em21 de junho de 2023
[Link] 6/6