En la parte anterior, agregamos navegación a nuestra aplicación usando SwitchNavigator
la 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 screens
carpeta. Cree un ReadLaterScreen.js
archivo 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.js
archivo, luego importe el createStackNavigator()
método y el ReadLaterScreen
componente:
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 HomeScreen
componente desde el navegador de cambio al navegador de pila y anidamos el navegador de pila llamado MainNavigator
en el navegador de cambio llamado AppNavigator
.
Eso es. Ya hemos creado un contenedor de aplicaciones y lo hemos llamado desde el App
componente:
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.js
archivo y pase el props.navigation
objeto al ArticleItem
componente:
<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.js
archivo 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 navigationOptions
objeto para cada componente de la pantalla o el defaultNavigationOptions
objeto 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 headerTitle
propiedad 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 navigationOptions
en 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 navigationOptions
que toma una función de flecha que devuelve un objeto de configuración para la pantalla.
Aquí solo configuramos el título usando el, headerTitle
pero 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:
0 Comentarios
Dejanos tu comentario para seguir mejorando!