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

Props

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