Saltar al contenido principal

TouchableHighlight

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

consejo

Si buscas una forma más completa y preparada para el futuro de manejar entradas táctiles, revisa la API Pressable.

Un envoltorio para hacer que las vistas respondan correctamente a toques. Al presionar, se reduce la opacidad de la vista envuelta, permitiendo que el color de fondo subyacente sea visible, oscureciendo o tiñendo la vista.

El fondo subyacente se crea envolviendo el componente hijo en una nueva View, lo que puede afectar el diseño y a veces causar artefactos visuales no deseados si no se usa correctamente, por ejemplo si el backgroundColor de la vista envuelta no está explícitamente configurado como un color opaco.

TouchableHighlight debe tener un solo componente hijo (ni cero ni más de uno). Si deseas tener varios componentes hijos, envuélvelos en una View.

tsx
function MyComponent(props: MyComponentProps) {
  return (
    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
      <Text>My Component</Text>
    </View>
  );
}

<TouchableHighlight
  activeOpacity={0.6}
  underlayColor="#DDDDDD"
  onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableHighlight>;

Ejemplo​

Referencia

Propiedades​

Propiedades de TouchableWithoutFeedback​

Hereda las propiedades de TouchableWithoutFeedback.

activeOpacity​

Determina la opacidad que debe tener la vista envuelta cuando el toque está activo. El valor debe estar entre 0 y 1. Por defecto es 0.85. Requiere que underlayColor esté configurado.

Type
number

onHideUnderlay​

Se llama inmediatamente después de ocultar el fondo subyacente.

Type
function

onShowUnderlay​

Se llama inmediatamente después de mostrar el fondo subyacente.

Type
function

ref​

Un asignador de referencia al que se le asignará un nodo de elemento cuando se monte.

style​

Type
View.style

underlayColor​

Color del fondo subyacente que será visible cuando el toque esté activo.

Type
color

hasTVPreferredFocus
iOS
​

(Solo Apple TV) Enfoque preferido de TV (ver documentación del componente View).

Type
bool

nextFocusDown
Android
​

Siguiente enfoque hacia abajo en TV (ver documentación del componente View).

Type
number

nextFocusForward
Android
​

Siguiente enfoque hacia adelante en TV (ver documentación del componente View).

Type
number

nextFocusLeft
Android
​

Siguiente enfoque izquierdo en TV (ver documentación del componente View).

Type
number

nextFocusRight
Android
​

Siguiente enfoque derecho en TV (ver documentación del componente View).

Type
number

nextFocusUp
Android
​

Siguiente enfoque hacia arriba en TV (ver documentación del componente View).

Type
number

testOnly_pressed​

Útil para pruebas de snapshot.

Type
bool