'Tutorial de React Navigation 3x Series' createBottomTabNavigator Guía de desarrollo

React Navigation 3x Series Tutorialcreatebottomtabnavigator Development Guide

imagen

¡El nuevo tutorial tan esperado está en línea! Desbloquea React Native para desarrollar nuevas poses, usa la última y más novedosa tecnología de React Native, haz clic en mí Obtener !!!



createBottomTabNavigator Equivalente a TabBarController en iOS, la barra de pestañas en la parte inferior de la pantalla. Figura:



createBottomTabNavigator.png



API createBottomTabNavigator

|_+_|

  • createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig): (Obligatorio): El objeto de configuración de la ruta es un mapeo desde el nombre de la ruta hasta la configuración de la ruta, que le dice al navegador cuál es la ruta.
  • RouteConfigs (Opcional): configura la ruta del navegador (como: primera pantalla predeterminada, opciones de navegación, rutas, etc.) estilo (por ejemplo, modo de transición, modo de cabeza, etc.).

Se puede ver desde la API createBottomTabNavigator BottomTabNavigatorConfig Soporte a través de createBottomTabNavigator con RouteConfigs Dos parámetros para crear el navegador createBottomTabNavigator.

RouteConfigs

RouteConfigs admite tres parámetros BottomTabNavigatorConfigscreen así como path



  • navigationOptions (Obligatorio): especifique un componente React como el contenido de visualización principal de la pantalla. Cuando TabNavigator carga este componente, se le asignará un screen apuntalar.
  • navigation (opcional): se utiliza para configurar para admitir el uso de saltos de esquema, el uso específico se relacionará a continuación path Como se menciona en el capítulo
  • Schema (Opcional): se utiliza para configurar las opciones de navegación de la pantalla global, como: título, encabezadoRight, headerLeft, etc.

Consejo: También hay un video tutorial para React Navigation3x junto con este artículo. Bienvenido a aprender.

BottomTabNavigatorConfig

  • tabBarComponent: especifica el componente TabBar de createBottomTabNavigator, si no se especifica por defecto en iOS navigationOptions, usado por defecto en la plataforma Android TabBarBottom
    • TabBarTop versus TabBarBottom Todos TabBarTop Componentes compatibles, puede personalizar TabBar para reescribir estos dos componentes o puede implementar uno usted mismo según sea necesario
  • tabBarOptions: la configuración de TaBar se explicará en detalle a continuación
  • initialRouteName: el componente de página predeterminado, la primera página mostrada por createBottomTabNavigator
  • Orden: una matriz de routeNames que definen el orden de tabulación.
  • Rutas: proporciona un mapa de routeName a la configuración de ruta que anula la ruta establecida en routeConfigs.
  • backBehavior: ¿El botón de retroceso hace que la etiqueta cambie a la pestaña inicial? Si es así, configúrelo para cambiar a la pestaña inicial; de lo contrario, no haga nada. El valor predeterminado es cambiar a la pestaña inicial.

tabBarOptions (configuración de pestañas)

  • activeTintColor: establece el color de las etiquetas y los iconos en el estado seleccionado TabBar
  • inactiveTintColor: establece el color de las etiquetas y los iconos en el estado no seleccionado de TabBar
  • showIcon: si se muestra el icono, el valor predeterminado es falso
  • showLabel: si se muestra la etiqueta, el valor predeterminado es verdadero
  • upperCaseLabel: si se debe poner la etiqueta en mayúsculas, el valor predeterminado es verdadero.
  • tabStyle: establece el estilo de una sola pestaña
  • indicadorStyle: establece el estilo del indicador (la línea debajo de la pestaña)
  • labelStyle: establece el estilo de la etiqueta TabBar
  • iconStyle: establece el estilo del icono
  • Estilo: establece el estilo de toda la barra de pestañas.
  • allowFontScaling: establece si la etiqueta TabBar admite el escalado, que es compatible de forma predeterminada.
  • safeAreaInset: la propiedad de override forceInset, el valor predeterminado es {bottom: 'always', top: 'never'}, valores opcionales: top | abajo | izquierda | correcto ('siempre' | 'nunca')

p.ej:

|_+_|

Consejo: También hay un video tutorial para React Navigation3x junto con este artículo. Bienvenido a aprender.

navigationOptions (opciones de navegación de la pantalla)

Los parámetros de las opciones de navegación de pantalla compatibles con createBottomTabNavigator son:

  • Título: se puede utilizar como título genérico alternativo para headerTitle y tabBarLabel.
  • tabBarVisible: muestra u oculta TabBar, que se muestra de forma predeterminada
  • tabBarIcon: establece el icono de TabBar
  • tabBarLabel: establece la etiqueta de TabBar
  • tabBarOnPress: Tab se llama función de devolución de llamada, su argumento es una garantía del objeto variable:
    • navegación: apoyo de navegación ;
    • defaultHandler: el controlador predeterminado para la prensa de tabulación
  • tabBarButtonComponent: El componente React, que envuelve iconos y etiquetas e implementa onPress. De forma predeterminada, este es un contenedor para TouchableWithoutFeedback que representa lo mismo que otros componentes en los que se puede hacer clic. TabBarButtonComponent: TouchableOpacity será reemplazado por TouchableOpacity
  • tabBarAccessibilityLabel: Etiqueta de función auxiliar para el botón de pestaña. Cuando el usuario hace clic en la etiqueta, el lector de pantalla lee la información. Se recomienda configurar esto si no tiene una pestaña para la pestaña
  • tabBarTestID: el ID utilizado para encontrar el botón de pestaña en la prueba

Consejo: También hay un video tutorial para React Navigation3x junto con este artículo. Bienvenido a aprender.

[Caso 1] Utilice createBottomTabNavigator para navegar por la interfaz y configurar las opciones de navegación

createBottomTabNavigator

Paso 1: Cree un navegador de tipo createBottomTabNavigator

|_+_|

Consejo: También hay un video tutorial para React Navigation3x junto con este artículo. Bienvenido a aprender.

Paso 2: configurar las opciones de navegación:

NavigationOptions de TabNavigator tiene dos propiedades clave, la etiqueta tabBarLabel y el icono tabBarIcon:

|_+_|

Usado en el código anterior react-navigation El icono de vector sirve como el icono de visualización para la pestaña, y el tabBarIcon recibe un componente de React que puede personalizar según sea necesario:

  • tintColor: el color de la pestaña en el estado actual
  • Enfocado: si se selecciona la pestaña

Consejo: También hay un video tutorial para React Navigation3x junto con este artículo. Bienvenido a aprender.

El tercer paso: salto de interfaz

|_+_|

Análisis de código:

Los saltos de página se pueden dividir en dos pasos:

    1. Obtener navegación:
    |_+_|
    1. por tabBarOptions: { labelStyle: { fontSize: 12, }, tabStyle: { width: 100, }, style: { backgroundColor: 'blue', }, } Hacer un salto de página:
    |_+_|

    Aquí está el salto a export const AppTabNavigator = createBottomTabNavigator({ Page1: { screen: Page1, navigationOptions: { tabBarLabel: 'Page1', tabBarIcon: ({tintColor, focused}) => ( ), } }, Page2: { screen: Page2, navigationOptions: { tabBarLabel: 'Page2', tabBarIcon: ({tintColor, focused}) => ( ), } }, Page3: { screen: Page3, navigationOptions: { tabBarLabel: 'Page3', tabBarIcon: ({tintColor, focused}) => ( ), } }, }, { tabBarComponent: TabBarComponent, tabBarOptions: { activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff', } }) Pasó los parámetros Page2: { screen: Page2, navigationOptions: { tabBarLabel: 'Page2', tabBarIcon: ({tintColor, focused}) => ( ), } },

Consejo: También hay un video tutorial para React Navigation3x junto con este artículo. Bienvenido a aprender.

Paso 4: Actualice los parámetros de la página y vuelva

|_+_|

Análisis de código:

Pase el código anterior:

|_+_|

Actualice el tema actual y verá que cuando haga clic en el botón 'Cambiar color del tema', el color de la barra de pestañas cambiará.

Cuando el usuario hace clic react-native-vector-icons Cuando se presiona el botón, pase:

|_+_|

Se implementó un regreso a la pestaña predeterminada.

Consejo: También hay un video tutorial para React Navigation3x junto con este artículo. Bienvenido a aprender.

[Caso avanzado] Aplicación avanzada de react-navigation

Al usar react-navigation, a menudo hay algunos requisitos que no se pueden resolver con una configuración simple, como:

  • Configuración dinámica createBottomTabNavigator: El funcionario solo proporciona la configuración estática de las páginas en el TabNavigator. Si las páginas del TabNavigator no son fijas y deben generarse dinámicamente, ¿qué debe hacer?
  • Configurar dinámicamente el estilo de createBottomTabNavigator: Es imposible cambiar dinámicamente el estilo de TabNavigator a través de la documentación oficial, tales como: modificar el texto mostrado, modificar el color de la fuente, modificar el icono, etc.
  • Personalización de enrutamiento anidado de múltiples capas: después de que se ajusta el createdBottomTabNavigator, la página en el TabNavigator no se puede saltar a la página en el StackNavigator externo por medio de la navegación. Hay muchos escenarios de aplicación, especialmente cuando necesita personalizar el TabNavigator.
  • Inicializar los parámetros: ¿Cómo pasar parámetros al configurar la página?

Hay muchos escenarios de aplicación como el anterior, puede usarlo con este tutorial. La última versión de React Native + Redux para crear un video tutorial de aplicaciones en línea de alta calidad Estudio adicional Aplicaciones más avanzadas para react-navigation