Agregar navegación de pila con Stack Navigator

 En la parte anterior, agregamos navegación a nuestra aplicación usando SwitchNavigatorla biblioteca React Navigation. Esto nos permite navegar entre dos pantallas, una pantalla de inicio y una pantalla de inicio. Ahora, veamos cómo agregar navegación de pila entre la pantalla de inicio y una pantalla de lectura posterior que crearemos a continuación, pero implementaremos su funcionalidad más adelante en las próximas partes.

Según los documentos :

StackNavigator proporciona una forma para que su aplicación cambie entre pantallas donde cada nueva pantalla se coloca en la parte superior de una pila. De forma predeterminada, el navegador de pila está configurado para tener la apariencia familiar de iOS y Android.

Puede crear un navegador de pila llamando al createStackNavigator()método que toma una configuración de ruta y una configuración de navegación como argumentos.

Dentro de la screenscarpeta. Cree un ReadLaterScreen.jsarchivo y agregue el siguiente código inicial:

import React from 'react';
import { View, Text} from 'react-native';
const ReadLaterScreen = () => {
    return <View>
        <Text>
            Read later screen
        </Text>
    </View>
};
export default ReadLaterScreen;

Vaya al App.jsarchivo, luego importe el createStackNavigator()método y el ReadLaterScreencomponente:

import ReadLaterScreen from './screens/ReadLaterScreen';

import { createStackNavigator, createSwitchNavigator, createAppContainer } from "react-navigation";

A continuación, cree un navegador de pila de la siguiente manera:

const MainNavigator = createStackNavigator({
  Home: HomeScreen,
  ReadLater: ReadLaterScreen
});

Además, debe cambiar el navegador de cambio de la siguiente manera:

const AppNavigator = createSwitchNavigator({
  Splash: SplashScreen,
  Main: MainNavigator
});

Pasamos al HomeScreencomponente desde el navegador de cambio al navegador de pila y anidamos el navegador de pila llamado MainNavigatoren el navegador de cambio llamado AppNavigator.

Eso es. Ya hemos creado un contenedor de aplicaciones y lo hemos llamado desde el Appcomponente:

AppContainer = createAppContainer(AppNavigator);
const App = () => {
  return <AppContainer />

};
export default App;

Ahora, solo necesitamos poder navegar desde la pantalla de inicio a la pantalla de leer más tarde cuando presionamos el botón Leer más tarde que guardará el enlace en la base de datos local y nos llevará a la pantalla donde encontraremos todos los enlaces guardados. .

Primero, abra el screens/HomeScreen.jsarchivo y pase el props.navigationobjeto al ArticleItemcomponente:

            <FlatList
                data={ props.navigation.getParam("articles", []) }
                ListHeaderComponent={FlatListHeader}
                ItemSeparatorComponent={FlatListItemSeparator}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({ item }) => <ArticleItem article={item} navigation = { props.navigation }/>}
            />

A continuación, abra el components/ArticleItem.jsarchivo y llame al método navigate () del objeto de navegación cuando se presiona el botón Leer más tarde :

        <IconButton width= "50%" color = "white" bgcolor = "#ff5c5c" icon = { bookmarkIcon } onPress = { () => { saveArticle(title, url); navigation.navigate("ReadLater"); } } title = "Read later" />

Ahora, si vuelve a cargar su aplicación, debería poder navegar a la pantalla Leer más tarde haciendo clic en el botón Leer más tarde en cualquier artículo de noticias.

Después de agregar el navegador de pila, notará que los componentes que forman parte del navegador tienen una barra superior en blanco:

 

Ahora, ¿cómo personalizar el texto y el color de las barras de navegación superiores?

Puede personalizar la barra de navegación superior usando el navigationOptionsobjeto para cada componente de la pantalla o el defaultNavigationOptionsobjeto para todas las pantallas.

Cambie el navegador de pila de la siguiente manera:

const MainNavigator = createStackNavigator({
  Home: HomeScreen,
  ReadLater: ReadLaterScreen
},
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTitle: 'Newzzz'
    },
  }
);

Proporcionamos un segundo argumento al createStackNavigator()método que toma un objeto de configuración para personalizar muchos aspectos de la navegación.

Aquí usamos la headerTitlepropiedad para establecer un título de encabezado predeterminado para todas las pantallas de la pila de navegación y establecemos un color de fondo predeterminado usando backgroundColor.

También podemos personalizar cada pantalla de forma diferente usando navigationOptionsen la configuración de la ruta.

Veamos eso personalizando el título del encabezado de la pantalla Leer más tarde:

const MainNavigator = createStackNavigator({
  Home: HomeScreen,
  ReadLater: {
    screen: ReadLaterScreen,
    navigationOptions: () => ({
      headerTitle: `Reading list`
    }),
  },
},
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTitle: 'Newzzz'
    },
  }
);

En lugar de pasar directamente el componente a la configuración de la ruta, usamos un objeto con una propiedad de pantalla que especifica el componente a representar y navigationOptionsque toma una función de flecha que devuelve un objeto de configuración para la pantalla.

Aquí solo configuramos el título usando el, headerTitlepero puede consultar los documentos para obtener más opciones de navegación.

Estas son las capturas de pantalla de las pantallas, después de personalizar las barras de navegación: