Reaccionar componente de vista nativa

En este artículo, vamos a ver cómo crear un componente de vista en react-native. Para esto, vamos a utilizar el componente React Native View. Básicamente es un contenedor pequeño que admite el diseño con flexbox, estilo, algunos controles táctiles y de accesibilidad. Vea mapas directamente en la vista nativa equivalente en cualquier plataforma en la que se esté ejecutando React Native, ya sea UIView, <div>, android.view, etc.

Este componente está diseñado para anidarse dentro de otras vistas y puede tener de 0 a muchos elementos secundarios de cualquier tipo.

Sintaxis:

<view props="value"/>

Accesorios para el componente de vista:

• onStartShouldSetResponder: este accesorio es un tipo de función que se usa para iniciar la vista cuando el usuario toca el componente.
• accesible: esta propiedad se usa para indicar que la vista es un elemento de accesibilidad y el valor predeterminado es verdadero.
• AccesibilityLabel: esta propiedad solía anular el texto que lee el lector de pantalla cuando el usuario interactúa con el elemento.
• sugerencia de accesibilidad: esta propiedad ayuda a los usuarios a comprender qué sucederá cuando realicen una acción en el elemento de accesibilidad cuando ese resultado no esté claro en la etiqueta de accesibilidad.
• AccesibilityRole: esta propiedad se utiliza para comunicar el propósito de un componente al usuario de la tecnología de asistencia.
• AccesibilityState: se utiliza para describir el estado actual de un componente para el usuario de la tecnología de asistencia.
• valor de accesibilidad: esta propiedad se utiliza para representar el valor actual de un componente
• AccesibilityActions: esta propiedad permite que la tecnología de asistencia invoque mediante programación las acciones de un componente.
• onAccessibilityAction: esta propiedad se usa para invocar cuando el usuario realiza las acciones de accesibilidad.
• onAccessibilityTap: esta propiedad se usa si el sistema invocará esta función cuando el usuario realiza el gesto de toque de accesibilidad, la propiedad accesible debe ser verdadera.
• onMagicTap: esta propiedad se usa si el sistema invocará esta función cuando el usuario realiza el gesto de toque mágico, la propiedad accesible debe ser verdadera.
• onAccessibilityEscape: esta propiedad se usa si el sistema invocará esta función cuando el usuario realiza el gesto de escape, la propiedad accesible debe ser verdadera.
• accesibilidadViewIsModal: esta propiedad indica si VoiceOver debe ignorar los elementos dentro de las vistas que son hermanos del receptor.
• accessElementsHidden: esta propiedad que indica si los elementos de accesibilidad contenidos en este elemento de accesibilidad están ocultos.
• accessIgnoresInvertColors: esta propiedad que indica que esta vista debe o no debe invertirse cuando la inversión de color está activada.
• accessLiveRegion: esta propiedad indica a los servicios de accesibilidad si se debe notificar al usuario cuando cambie esta vista.
• importantForAccessibility: esta propiedad controla cómo la vista es importante para la accesibilidad, si activa eventos de accesibilidad y si se informa a los servicios de accesibilidad que consultan la pantalla, solo funciona en Android.
• hitSlop: este accesorio define qué tan lejos puede comenzar un evento táctil lejos de la vista
• nativeID: esta propiedad se usa para ubicar esta vista desde clases nativas.
• onLayout: este accesorio se usa para activar una Vista en la montura y en los cambios de diseño.
• onMoveShouldSetResponder: este accesorio se llama para cada movimiento táctil en la Vista cuando no es el que responde.
• onMoveShouldSetResponderCapture: si una vista principal quiere evitar que una vista secundaria se convierta en una respuesta en un movimiento, entonces debe tener este controlador que devuelve verdadero.
• onResponderGrant: la propiedad hace que View responda a eventos táctiles.
• onResponderMove: este accesorio es para activar la Vista de respuesta movida con el dedo del usuario.
• onResponderReject: si un respondedor ya está activo, esta propiedad bloqueará la solicitud del otro.
• onResponderRelease: este accesorio se usa para activar la vista al final del toque.
• onResponderTerminate: esta propiedad se usa para sacar al respondedor de la Vista.
• onResponderTerminationRequest: si alguna vista quiere ser un respondedor y en ese momento cualquier otra vista es el respondedor, esta propiedad le pedirá a esta vista activa que libere a su respondedor.
• onStartShouldSetResponderCapture: si una Vista principal quiere evitar que una Vista secundaria se convierta en respondedora solo con un inicio táctil, entonces se usará esta propiedad.
• pointerEvents: esta propiedad se usa para controlar si la Vista puede ser el objetivo de los eventos táctiles.
• removeClippedSubviews: esta propiedad es para desplazar el contenido cuando hay muchas subvistas, la mayoría de las cuales están fuera de la pantalla.
• estilo: esta propiedad se utiliza para diseñar los componentes de la vista.
• testID: esta propiedad se utiliza para ubicar esta vista en las pruebas de un extremo a otro.
• colapsable: este accesorio utilizado en Views, que solo se usa para diseñar a sus elementos secundarios o, de lo contrario, no dibujar nada, puede eliminarse automáticamente de la jerarquía nativa como una optimización.
• NeedsOffscreenAlphaCompositing: esta propiedad define que la vista debe renderizarse fuera de la pantalla y componerse con el alfa para conservar los colores correctos y el comportamiento de fusión.
• renderToHardwareTextureAndroid:
• shouldRasterizeIOS: esta propiedad define que la vista debe representarse como un mapa de bits antes de la composición, es útil en dispositivos ios.
• nextFocusDown: esta propiedad es para establecer que la siguiente vista reciba el foco cuando el usuario navegue hacia abajo.
• nextFocusForward: esta propiedad es para establecer que la siguiente vista reciba el foco cuando el usuario navega hacia adelante.
• nextFocusLeft: este accesorio es para establecer que la siguiente vista reciba el foco cuando el usuario navega hacia la izquierda.
• nextFocusRight: este accesorio es para establecer que la siguiente vista reciba el foco cuando el usuario navega hacia la derecha.
• nextFocusUp: este accesorio es para configurar que la siguiente vista reciba el foco cuando el usuario navega hacia arriba.
• Enfocable: este accesorio se usa para definir la vista como debería ser enfocable con un dispositivo de entrada no táctil.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

Estructura del proyecto:

Ejemplo: Ahora implementemos el componente de vista. Aquí creamos un componente de vista dentro de ese componente, podemos poner cualquier API, pero aquí pondremos un botón de alerta y cuando alguien haga clic en ese botón, aparecerá una alerta.

import React from 'react';
import { StyleSheet,
        Text,
        View,
        Button,
        Alert
        } from 'react-native';
  
export default function App() {
  
// Alert function
const alert = ()=>{
    Alert.alert(
    "GeeksforGeeks",
    "A Computer Science Portal",
    [
        {
        text: "Cancel",
        },
        {
        text: "Agree",
        }
    ]
    );
}
  
return (
    <View style={styles.container}>
      <Button title={"Register"} onPress={alert}/>
    </View>
);
}
  
const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center',
},
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. 

Referencia: https://reactnative.dev/docs/view