0

Hola buen día estoy intentando hacer un header (react native) donde las opciones se pueda deslizar y cuando cambie de opcion cambie de pantalla

Opción uno del navbar

Se desliza hacia la segunda opción del navbar

Se desliza hacia la segunda opción del navbar

Cambia a la opción dos del navbar

La idea es que cuando se deslice a la segunda opción cambie totalmente la pantalla y si se desliza a la primera opción vuelva de nuevo a la pantalla que tiene otro navbar con cuatro opciones.

Usé la opción createMaterialTopTabNavigator para hacer el efecto slide en el cambio entre pantallas (como en facebook) Eso para el navbar que tiene cuatro opciones, pero lo que no he podido lograr es que el primer navbar al momento de hacer swipe hacia la izquierda cambie a otra pantalla.

Un ejemplo claro de esto es como lo hace gmail cuando hay varias cuentas se puede hacer swipe hacia arriba o abajo y cambia de cuenta

Quedo atento a cualquier comentario, gracias.

0

1 respuesta 1

0

No se si sea la forma correcta pero de esta manera solucioné lo que estaba buscando:

import React, { useState } from 'react'
import { Dimensions, NativeScrollEvent, SafeAreaView, StyleSheet, Text, View } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'
import MaintenanceNavigator from './MaintenanceNavigator'
import RideNavigator from './RideNavigator'

const WIDTH = Dimensions.get('window').width
const icons = [
  { id: 1, text: 'One' }, { id: 2, text: 'Two' }
]

const MainNavigator = () => {

  const [imgActive, setimgActive] = useState(0)
  const onchange = (nativeEvent: NativeScrollEvent) => {
    const slide = nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width
    if (slide != imgActive && slide % 1 == 0)
      setimgActive(slide)
  }
  return (
    <>
      <SafeAreaView style={styles.header}>
        <View style={styles.wrap}>
          <ScrollView
            onScroll={({ nativeEvent }) => onchange(nativeEvent)}
            showsHorizontalScrollIndicator={false}
            pagingEnabled
            horizontal
            style={styles.wrap}
          >
            {
              icons.map((e, index) =>
                <Text style={styles.wrap} key={e.id}>{e.text}</Text>
              )
            }
          </ScrollView>
        </View>
      </SafeAreaView>
      {
        imgActive === 0 ? (
          <RideNavigator />
        ) : (
          <MaintenanceNavigator />
        )
      }
    </>
  )
}

const styles = StyleSheet.create({
  header: {
    height: 50,
    backgroundColor: '#FFF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  optionOne: {
    width: '100%',
    position: 'absolute',
  },
  wrap: {
    width: WIDTH,
    height: 50,
    backgroundColor: '#FFF',

  },
})

export default MainNavigator

Hay alguna forma más limpia de hacer esto?

introducir la descripción de la imagen aquí

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.