React Navigation 4.x createStackNavigator

Antes de mais nada o React Navigation fornece uma maneira de seu aplicativo React Native em fazer a transição entre telas, onde cada nova tela é colocada no topo de uma pilha.

React Navigation 4.x createStackNavigator

A princípio ao trabalhar com React Navigation por padrão, o navegador de pilha está configurado para ter a aparência familiar do iOS e Android: novas telas deslizam da direita no iOS, desaparecem da parte inferior do Android. No iOS, o navegador da pilha também pode ser configurado para um estilo modal, onde as telas deslizam da parte inferior.

Entretanto para usar esse navegador, verifique se você possui a navegação de reação e suas dependências instaladas e instale react-navigation-stack.

npm install react-navigation-stack @react-native-community/masked-view

Definição da API – React Navigation

import { createStackNavigator } from 'react-navigation-stack';

createStackNavigator(RouteConfigs, StackNavigatorConfig);

RouteConfigs

O objeto de configurações de rota é um mapeamento do nome da rota para uma configuração de rota, que informa ao navegador o que apresentar para essa rota.

createStackNavigator({
  // For each screen that you can navigate to, create a new entry like this:
  Profile: {
    // `ProfileScreen` is a React component that will be the main content of the screen.
    screen: ProfileScreen,
    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.

    // Optional: When deep linking or using react-navigation in a web app, this path is used:
    path: 'people/:name',
    // The action and route params are extracted from the path.

    // Optional: Override the `navigationOptions` for the screen
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.name}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});

StackNavigatorConfig – React Navigation

Opções para o roteador:

• initialRouteName – Define a tela padrão da pilha. Deve corresponder a uma das chaves nas configurações de rota.
• initialRouteParams – Os parâmetros para a rota inicial
• initialRouteKey – identificador opcional da rota inicial
• navigationOptions – Opções de navegação para o próprio navegador, para configurar um navegador pai
• defaultNavigationOptions – Opções de navegação padrão para usar em telas

• paths – Um mapeamento de substituições para os caminhos definidos nas configurações de rota

  Opções visuais:

• mode – Define o estilo para renderização e transições:

• card – Use as transições de tela padrão do iOS e Android. Esse é o padrão.

• modal – Faça as telas deslizarem da parte inferior, que é um padrão comum do iOS. Só funciona no iOS, não afeta a transição no Android. Isso também desativa react-native-screensa pilha.

• headerMode – Especifica como o cabeçalho deve ser renderizado:

• float – Renderize um único cabeçalho que fique no topo e seja animado à medida que as telas forem alteradas. Esse é um padrão comum no iOS.

• screen – Cada tela tem um cabeçalho anexado e o cabeçalho desaparece e desaparece junto com a tela. Este é um padrão comum no Android.

• none – Nenhum cabeçalho será renderizado.

• keyboardHandlingEnabled – Se false, o teclado na tela NÃO será descartado automaticamente ao navegar para uma nova tela. O padrão é true.
  navigationOptions para telas dentro do navegador
  title
  String que pode ser usada como um substituto para headerTitle. Além disso, será usado como um substituto para tabBarLabel(se aninhado em um TabNavigator) ou drawerLabel(se aninhado em um DrawerNavigator).

header

A função fornecida HeaderPropsretorna um React Element, para exibir como um cabeçalho.

Exemplo:

header: ({ scene, previous, navigation }) => {
  const { options } = scene.descriptor;
  const title =
    options.headerTitle !== undefined
      ? options.headerTitle
      : options.title !== undefined
      ? options.title
      : scene.route.routeName;

  return (
    <MyHeader
      title={title}
      leftButton={
        previous ? <MyBackButton onPress={navigation.goBack} /> : undefined
      }
    />
  );
};

Por padrão, há um cabeçalho flutuante que renderiza os cabeçalhos para várias telas no iOS. Esses cabeçalhos incluem animações para alternar suavemente entre si. Ao usar um cabeçalho personalizado, é recomendável definir a headerMode opção no navegador como screen para que você não precise implementar animações.

headerStyle: {
  height: 80, // Specify the height of your custom header
};

Para definir um cabeçalho personalizado para todas as telas do navegador, você pode especificar esta opção na defaultNavigationOptions opção do navegador.

headerShown

Se deve mostrar ou ocultar o cabeçalho da tela. O cabeçalho é mostrado por padrão, a menos que tenha headerMode sido definido como none. Definir isso para false ocultar o cabeçalho.

Ao ocultar o cabeçalho em telas específicas, convém também definir a headerMode opção screen.

headerTitle

String ou uma função que retorna um React Element a ser usado pelo cabeçalho. O padrão é a cena title. Quando uma função é especificada, ela recebe um objeto contendo allowFontScaling, stylee childrenpropriedades. A childrenpropriedade contém a sequência do título.

headerTitleAlign

Como alinhar o título do cabeçalho. Valores possíveis:

left
center
O padrão é centerno iOS e leftno Android.

headerTitleAllowFontScaling

Se a fonte do título do cabeçalho deve ser dimensionada para respeitar as configurações de acessibilidade do Tamanho do texto. O padrão é false.

headerBackAllowFontScaling

Se a fonte do título do botão Voltar deve ser dimensionada para respeitar as configurações de acessibilidade do Tamanho do texto. O padrão é false.

headerBackImage

Função que retorna um React Element para exibir uma imagem personalizada no botão voltar do cabeçalho. Quando uma função é usada, ela recebe o tintColor objeto de argumento in. O padrão é o componente Imagem com a react-navigation/views/assets/back-icon.pngorigem da imagem de volta, que é a imagem padrão do ícone de volta para a plataforma (uma divisa no iOS e uma seta no Android).

headerBackTitle

Cadeia de título usada pelo botão Voltar no iOS. O padrão é a cena anterior headerTitle.

headerBackTitleVisible

Um padrão razoável é fornecido para saber se o título do botão Voltar deve estar visível ou não, mas se você deseja substituir, pode usar trueou falsenesta opção.

headerTruncatedBackTitle

Cadeia de título usada pelo botão Voltar quando headerBackTitlenão cabe na tela. "Back"por padrão.

headerRight
Função que retorna um elemento de reação para exibir no lado direito do cabeçalho.

headerLeft

Função que retorna um elemento de reação para exibir no lado esquerdo do cabeçalho. Quando uma função é usado, ele recebe um número de argumentos quando renderizado ( onPress, label, labelStylee mais – verifique types.tsx para a lista completa).

headerStyle

Objeto de estilo para o cabeçalho. Você pode especificar uma cor de plano de fundo personalizada aqui, por exemplo.

headerTitleStyle

Objeto de estilo para o componente de título

headerBackTitleStyle

Objeto de estilo para o título anterior

headerLeftContainerStyle

Personalize o estilo do contêiner do headerLeftcomponente, por exemplo, para adicionar preenchimento.

headerRightContainerStyle

Personalize o estilo do contêiner do headerRightcomponente, por exemplo, para adicionar preenchimento.

headerTitleContainerStyle

Personalize o estilo do contêiner do headerTitlecomponente, por exemplo, para adicionar preenchimento.

Por padrão, headerTitleContainerStyle é com um estilo de posição absoluto e compensa ambos lefte right. Isso pode levar a espaços em branco ou sobreposição entre headerLefte headerTitlese um personalizado headerLeftfor usado. Pode ser resolvido ajustando lefte rightestilizando dentro headerTitleContainerStylee marginHorizontaldentro headerTitleStyle.

headerTintColor

Cor da tonalidade para o cabeçalho

headerPressColorAndroid

Cor para ondulação do material (somente Android> = 5.0)

headerTransparent

O padrão é false. Se true, o cabeçalho não terá um plano de fundo, a menos que você o forneça explicitamente headerBackground. O cabeçalho também flutua sobre a tela, de modo que sobrepõe o conteúdo abaixo.

Isso é útil se você deseja renderizar um cabeçalho semitransparente ou um fundo desfocado.

Observe que, se você não deseja que seu conteúdo apareça sob o cabeçalho, é necessário adicionar manualmente uma margem superior ao seu conteúdo. O React Navigation não fará isso automaticamente.

Para obter a altura do cabeçalho, você pode usar HeaderHeightContextcom Reagir da API Contexto ou useHeaderHeight:

import { useHeaderHeight } from 'react-navigation-stack';

// ...

const headerHeight = useHeaderHeight();

headerBackground;

Função que retorna um React Element para renderizar como plano de fundo do cabeçalho. Isso é útil para usar fundos como uma imagem ou um gradiente.

Por exemplo, você pode usá-lo com headerTransparent para renderizar uma exibição de desfoque e criar um cabeçalho translúcido.

import { BlurView } from 'expo-blur';

// ...

MyScreen.navigationOptions = {
  headerTransparent: true,
  headerBackground: () => (
    <BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} />
  ),
};

headerStatusBarHeight

Preenchimento extra para adicionar na parte superior do cabeçalho e levar em conta a barra de status translúcida. Por padrão, ele usa o valor superior das inserções da área segura do dispositivo. Passe 0 ou um valor personalizado para desativar o comportamento padrão e personalize a altura.

cardShadowEnabled

Use esse suporte para ter sombras visíveis durante as transições. O padrão é true.

cardOverlayEnabled

Use esse suporte para ter uma sobreposição escura semitransparente visível sob o cartão durante as transições. O padrão é true no Android e falseno iOS.

cardStyle

Objeto de estilo para o cartão na pilha. Você pode fornecer uma cor de plano de fundo personalizada para usar em vez do plano de fundo padrão aqui.

Você também pode especificar { backgroundColor: 'transparent' }para tornar a tela anterior visível embaixo. Isso é útil para implementar coisas como diálogos modais. Você também deve especificar mode: 'modal'na configuração da exibição de pilha ao usar um plano de fundo transparente para que as telas anteriores não sejam desanexadas e fiquem visíveis por baixo.

animationEnabled

Se a animação de transição deve ser ativada na tela. Se você configurá-lo como false, a tela não será animada ao pressionar ou estourar. O padrão é true.

gestureEnabled

Se você pode usar gestos para descartar essa tela. O padrão é trueno iOS, falseno Android.

gestureResponseDistance

Objeto para substituir a distância do início do toque da borda da tela para reconhecer gestos. Leva as seguintes propriedades:

horizontal– number – Distância para a direção horizontal. O padrão é 25.
vertical– number – Distância para direção vertical. O padrão é 135.

gestureVelocityImpact

Número que determina a relevância da velocidade para o gesto. O padrão é 0.3.

gestureDirection

Direção dos gestos e animações. Consulte a seção Animações para obter detalhes.

transitionSpec

Objeto de configuração para a transição de tela. Consulte a seção Animações para obter detalhes.

cardStyleInterpolator

Estilos interpolados para várias partes do cartão. Consulte a seção Animações para obter detalhes.

headerStyleInterpolator

Estilos interpolados para várias partes do cabeçalho. Consulte a seção Animações para obter detalhes.

safeAreaInsets

Inserções de área segura para a tela. Isso é usado para evitar elementos como entalhe e barra de status. Por padrão, as inserções de área segura do dispositivo são detectadas automaticamente. Você pode substituir o comportamento por esta opção.

Toma um objecto que contém as seguintes propriedades opcionais: top, right, bottome left.

onTransitionStart

Retorno de chamada que é chamado quando uma animação de transição é iniciada (quando a tela aparece e oculta).

onTransitionEnd

Retorno de chamada chamado quando uma animação de transição termina.

params

Você pode fornecer parâmetros padrão dentro das definições de rota:

const Store = createStackNavigator({
  Playstation: { screen: ProductScreen, params: { product: 'Playstation' } },
  Xbox: { screen: ProductScreen, params: { product: 'Xbox' } },
});

Animações – React Navigation

Opções relacionadas à animação
O Stack Navigator expõe várias opções para configurar a animação de transição quando uma tela é adicionada ou removida. Essas animações de transição podem ser personalizadas por tela, especificando as opções no optionssuporte para cada tela.

• gestureDirection – A direção dos gestos de furto e das animações:

• horizontal – O gesto para fechar a tela começará da esquerda e da direita em RTL. Para animações, a tela deslizará da direita com SlideFromRightIOSe da esquerda em RTL.

• horizontal-inverted – O gesto para fechar a tela começará da direita e da esquerda em RTL. Para animações, a tela deslizará da esquerda com SlideFromRightIOSe da direita em RTL conforme a direção for invertida.

• vertical – O gesto para fechar a tela começará do topo. Para animações, a tela deslizará da parte inferior.

• vertical-inverted – O gesto para fechar a tela começará de baixo. Para animações, a tela deslizará do topo.

• transitionSpec – Um objeto que especifica o tipo de animação ( timingou spring) e suas opções (como durationpara timing). São necessárias 2 propriedades:

• open – Configuração para a transição ao adicionar uma tela

• close – Configuração para a transição ao remover uma tela. Cada objeto deve especificar 2 propriedades:

• animation – A função de animação a ser usada para a animação. Os valores suportados são timinge spring.

• config – O objeto de configuração para a função de temporização. Pois timing, pode ser duratione easing. Para spring, ele pode ser stiffness, damping, mass, overshootClamping, restDisplacementThresholde restSpeedThreshold.Uma configuração que usa animação de primavera se parece com isso:const config = { animation: 'spring', config: { stiffness: 1000, damping: 500, mass: 3, overshootClamping: true, restDisplacementThreshold: 0.01, restSpeedThreshold: 0.01, }, };

Podemos passar esta função na transitionSpecopção:Profile.navigationOptions = { transitionSpec: { open: config, close: config, }, };

• cardStyleInterpolator – Esta é uma função que especifica estilos interpolados para várias partes do cartão. Espera-se que retorne pelo menos um objeto vazio, possivelmente contendo estilos interpolados para contêiner, o próprio cartão, sobreposição e sombra. As propriedades suportadas são:
• containerStyle – Estilo para a visualização do contêiner que envolve o cartão.
• cardStyle – Estilo para a vista que representa o cartão.
• overlayStyle – Estilo da vista que representa a sobreposição semitransparente abaixo
• shadowStyle – Estilo para a vista que representa a sombra do cartão.A função recebe as seguintes propriedades em seu argumento:
• current – Valores para a tela atual:
• progress – Nó animado representando o valor do progresso da tela atual. 0 quando a tela deve começar a aparecer, 0.5 quando estiver no meio do caminho, 1 quando deve estar totalmente visível.
• next – Valores para a tela atual a tela após esta na pilha. Isso pode acontecer undefined caso a animação da tela seja a última.
• progress – Nó animado representando o valor do progresso da próxima tela.
• index – O índice do cartão na pilha. closing– Nó animado representando se o cartão está fechando. 1 ao fechar, 0 se não estiver.
• layouts – Medições de layout para vários itens que usamos para animação.
• screen – Layout da tela inteira. Contém heighte widthpropriedades. Uma configuração que apenas desbota o cartão se parece com isso:const forFade = ({ current, closing }) => ({ cardStyle: { opacity: current.progress, }, }); Podemos passar esta função na cardStyleInterpolatoropção:Profile.navigationOptions = { cardStyleInterpolator: forFade, };
• headerStyleInterpolator – Esta é uma função que especifica estilos interpolados para várias partes do cabeçalho. É esperado que retorne pelo menos um objeto vazio, possivelmente contendo estilos interpolados para rótulo e botão esquerdo, botão direito, título e plano de fundo. As propriedades suportadas são:
• leftLabelStyle – Estilo para a etiqueta do botão esquerdo (etiqueta do botão voltar).
• leftButtonStyle – Estilo para o botão esquerdo (geralmente o botão Voltar).
• rightButtonStyle – Estilo para o botão direito.
• titleStyle – Estilo para o texto do título do cabeçalho.
• backgroundStyle – Estilo para o fundo do cabeçalho.A função recebe as seguintes propriedades em seu argumento:
• current – Valores para a tela atual (a tela que possui este cabeçalho).
• progress – Nó animado representando o valor do progresso da tela atual.
• next – Valores para a tela atual a tela após esta na pilha. Isso pode acontecer undefined caso a animação da tela seja a última.
• progress – Nó animado representando o valor do progresso da próxima tela.
• layouts – Medições de layout para vários itens que usamos para animação. Cada objeto de layout contém heighte widthpropriedades.
• screen – Layout da tela inteira.
• title – Layout do elemento do título. Pode ser undefinedquando não estiver renderizando um título.
• leftLabel – Layout da etiqueta do botão Voltar. Pode ser undefinedque não esteja renderizando um rótulo de botão Voltar.Uma configuração que apenas desvanece os elementos se parece com isso:const forFade = ({ current, next }) => { const opacity = Animated.add( current.progress, next ? next.progress : 0 ).interpolate({ inputRange: [0, 1, 2], outputRange: [0, 1, 0], }); return { leftButtonStyle: { opacity }, rightButtonStyle: { opacity }, titleStyle: { opacity }, backgroundStyle: { opacity }, }; }; Podemos passar esta função na headerStyleInterpolatoropção:Profile.navigationOptions = { headerStyleInterpolator: forFade, }; Configurações pré-fabricadas – React Navigation Com essas opções, é possível criar animações de transição personalizadas para telas. Também exportamos várias configurações da biblioteca com animações prontas que você pode usar:

TransitionSpecs

• TransitionIOSSpec – Valores exatos da configuração de animação do UINavigationController.
• FadeInFromBottomAndroidSpec – Configuração para animação de atividade aberta do Android Nougat.
• FadeOutToBottomAndroidSpec – Configuração para atividade fechar animação do Android Nougat.
• RevealFromBottomAndroidSpec – Configuração aproximada para animação de atividade aberta do Android Pie.

import { TransitionSpecs } from 'react-navigation-stack';

// ...

static navigationOptions = {
  title: 'Profile',
  transitionSpec: {
    open: TransitionSpecs.TransitionIOSSpec,
    close: TransitionSpecs.TransitionIOSSpec,
  },
}

CardStyleInterpolators

• forHorizontalIOS – Deslize no estilo iOS padrão da direita.
• forVerticalIOS – Deslize no estilo padrão do iOS a partir da parte inferior (usada para modais).
• forModalPresentationIOS – Animação modal padrão no estilo iOS no iOS 13.
• forFadeFromBottomAndroid – O estilo padrão do Android desaparece da parte inferior para o Android Oreo.
• forRevealFromBottomAndroid – Revelação padrão no estilo Android, de baixo para Android Pie. Exemplo de configuração para animação vertical de desbotamento da tela do estilo Android Oreo:

import { CardStyleInterpolators } from 'react-navigation-stack';

// ...

static navigationOptions = {
  title: 'Profile',
  cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
}

HeaderStyleInterpolators

• forUIKit – Animação no estilo UIKit padrão para o cabeçalho em que o título desaparece no rótulo do botão Voltar.
• forFade – Animação de desbotamento simples para os elementos do cabeçalho.
• forStatic – Animação de tradução simples para traduzir o cabeçalho junto com a tela deslizante. Exemplo de configuração para animação padrão do iOS para elementos de cabeçalho em que o título desaparece no botão Voltar:

import { HeaderStyleInterpolators } from 'react-navigation-stack';

// ...

static navigationOptions = {
  title: 'Profile',
  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
}

Nota: sempre defina sua configuração de animação no nível superior do arquivo para garantir que as referências não sejam alteradas nas repetições. Isso é importante para animações de transição suaves e confiáveis.

TransitionPresets

Exportamos várias predefinições de transição que agrupam vários conjuntos dessas opções para corresponder a determinadas animações nativas. Uma predefinição de transição é um objeto que contém poucas opções de tela relacionadas à animação exportadas em TransitionPresets. Atualmente, as seguintes predefinições estão disponíveis:

• SlideFromRightIOS – Transição de navegação iOS padrão.
• ModalSlideFromBottomIOS – Transição de navegação iOS padrão para modais.
• ModalPresentationIOS – Estilo de apresentação modal padrão do iOS (introduzido no iOS 13).
• FadeFromBottomAndroid – Transição de navegação padrão do Android ao abrir ou fechar uma atividade no Android <9 (Oreo).
• RevealFromBottomAndroid – Transição de navegação padrão do Android ao abrir ou fechar uma Atividade no Android> = 9 (Torta).
• DefaultTransition – Transição de navegação padrão para a plataforma atual.
• ModalTransition – Transição modal padrão para a plataforma atual. Você pode espalhar essas predefinições navigationOptions para personalizar a animação para uma tela:

import { TransitionPresets } from 'react-navigation-stack';

// ...

static navigationOptions = {
  title: 'Profile',
  ...TransitionPresets.ModalSlideFromBottomIOS
}

Se você desejar personalizar as animações de transição para todas as telas do navegador, poderá especificá-las defaultNavigationOption são definir um navegador.

Exemplo de configuração para o estilo de apresentação modal do iOS:

import { TransitionPresets } from 'react-navigation-stack';

// ...

const Stack = createStackNavigator(
  {
    Home,
    Profile,
    Settings,
  },
  {
    mode: 'modal',
    headerMode: 'none',
    defaultNavigationOptions: {
      gestureEnabled: true,
      cardOverlayEnabled: true,
      ...TransitionPresets.ModalPresentationIOS,
    },
  }
);

Traduzido de https://reactnavigation.org/docs/en/stack-navigator.html