80/900 parte 4-9

para finalizar la instalación de react-native-gesture-handler, agregue lo siguiente en la parte superior (asegúrese de que este en la parte superior y no haya nada mas antes) de su archivo de entrada, como index.js o app.js

• import 'react-native-gesture-handler';

• Import 'react-native-gesture-handler';

• import 'react-native-gesture-handler' from native;

• import 'react-native-gesture-handler' from React;

para la instalación del componente que permite una simple barra de pestañas en la parte interior de la pantalla que le permite cambiar entre diferente rutas, sus componentes de pantalla no se monta hasta que se enfoca por primera vez, se utiliza la línea:

• npm install @react-navigation/bottom-tabs

• np install @react-navigation/bottom-tabs

• npm Install @react-navigation/bottom-tabs

• npm @react-navigation/bottom-tabs

una barra de pestañas temática de diseño de materiales en la parte inferior de la pantalla que le permite cambiar entre diferentes rutas con animación, la rutas se inicializan de forma perezosa: sus componentes de pantalla no se montan hasta que se enfocan por primera vez:

• Material Botton Tabs Navigator

• Material Tabs Navigator

• Material Botton Navigator

• Material Botton Tabs

para la instalación de los componentes adicionales de material Botton Tabs Navigator Utilizamos la siguiente línea:

• npm install @react-navigation/material-button-tabs react-native-paper react-native-vector-icons

• npm install react-native-paper react-native-vector-icons

• npm install @react-navigation/material-button-tabs react-native-vector-icons

• npm install @react-navigation/material-button-tabs react-native-paper

una barra de pestañas temática de diseño de materiales en la parte superior de la pantalla que le permite cambiar entre diferentes rutas tocando las pestañas o deslizando horizontalmente las transiciones están animadas de forma predeterminada, los componentes de pantalla para cada ruta se montan inmediatamente

• Material Top Tabs Navigator

• Top Tabs Navigator

• Material Tabs Navigator

• Material Top Navigator

es un gancho que da acceso al objeto de ruta, es til no puede pasar la propiedad de ruta al componente directamente, o no requiere pasarlo en el acceso de un elemento secundario profundamente animado

• useRoute

• useNavigationState

• useFocusEffect

• useIsFocused

es un gancho que da acceso al estado de navegación del navegador que contiene la pantalla es útil en caso excepcionales en los que desea representar algo en función del estado de navegación

• useNavigationState

• useRoute

• useFocusEffect

• useIsFocused

a veces queremos ejecutar efectos secundarios cuando una pantalla esta enfocada, un efecto secundario puede incluir cosas como agregar un detector de eventos, obtener, datos actualizar el titulo del documento, etc. si bien esto se puede lograr mediante eventos de enfoque y desenfoque, no es muy ergonómico

• 
  useFocusEffect

• useNavigationState

• useRoute

• 
  useIsFocused

es posible que deseemos representar contenido diferente en función del estado de enfoque actual de la pantalla, la biblioteca exportan un gancho para hacerlo mas fácil:

• 
  useIsFocused

• 
  useFocusEffect

• useNavigationState

• useRoute

el gancho nos permite navegar a una pantalla usando una ruta en lugar de un nombre de pantalla según las opciones de enlace. devuelve una función que recibe la ruta a la que navegar

• useLinkTo

• useLinkProps

• useLinkBuilder

• useScrollToTop