Reaccionar vista nativa en prensa

Este tutorial le enseña cómo configurar onPress en una vista de React Native.

Reaccionar vista nativa en prensa

Necesitamos configurar onPress en numerosos escenarios cuando se trata de componentes React Native, pero debemos rodearlo con React Native Touchables.

¿Qué pasaría si pudiéramos configurar onPress en el contenedor View? Es posible con onStartShouldSetResponder, que solo funciona con React Native versión 55.3. Aprendamos con la siguiente valla de código.

Código de ejemplo:

import React from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={{
    flex: 1 }}>
      <View style={styles.container}>
        <View
          style={styles.innerView}
          onStartShouldSetResponder={() => alert('You have clicked on view')}
        >
          <Text style={styles.paragraph}>Click on a View</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 25,
    backgroundColor: '#72d4ed',
    padding: 8,
  },
  innerView: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 25,
    backgroundColor: '#f77979',
    marginTop: 200,
    marginBottom: 200,
    marginLeft: 20,
    marginRight: 20,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});
export default App;

Los botones se utilizan en todos los lenguajes de programación para capturar los eventos de clic del usuario. Sin embargo, en React Native, podemos activar el evento click onPress en el componente View usando su propiedad onStartShouldSetResponder.

Porque necesitamos hacer que el componente Ver responda a veces o activar un evento cuando el usuario hace clic en Ver. Entonces tenemos la propiedad onStartShouldSetResponder. Funciona de manera similar al evento button onPress y puede manejar llamadas a funciones.

Cuando establecemos onStartShouldSetResponder en true, le decimos a nuestro respondedor de gestos que esta vista debe obtener todos los eventos de movimiento que ocurren en esta parte de la pantalla.

Incluso si muevo mi mano sobre la vista del cursor, que es el hijo de un padre, no debería tener ningún efecto porque solo el padre ha pedido ser el respondedor táctil. Recuerda, tenemos que solicitarlo; de lo contrario, no será interactivo por defecto.

Producción:

Cuando ejecutes el código, verás algo como esto:

Como puede ver, hay un botón llamado hacer clic en ver; cuando hace clic en eso, activa el método onpress, que mostrará una ventana emergente que dice Ha hecho clic en ver.