Reaccionar componente de botón nativo

El siguiente enfoque cubre cómo usar el botón en react-native . Para ello, vamos a utilizar el componente Button. Básicamente es un componente en el que se puede hacer clic que se utiliza para realizar alguna acción cuando el usuario hace clic en él.

Sintaxis:

<Button
 onPress={}
 title="Button"
 color="#841584"
/>

Accesorios en el botón:

• onPress: Se llama cuando el usuario toca el botón.
• title: Es el texto que se muestra dentro del botón.
• AccesibilityLabel: texto que se mostrará para las funciones de accesibilidad para personas ciegas.
• color: Se utiliza para establecer el color del botón.
• disabled: si es cierto, entonces el usuario no pudo presionar el botón.
• hasTVPreferredFocus: Enfoque preferido de TV, solo está disponible para TV.
• nextFocusDown: designa la siguiente vista para recibir el foco cuando el usuario navega hacia abajo.
• nextFocusForward: Designa la siguiente vista para recibir el foco cuando el usuario navega hacia adelante.
• nextFocusLeft: Designa la siguiente vista para recibir el foco cuando el usuario navega hacia la izquierda.
• nextFocusRight: Designa la siguiente vista para recibir el foco cuando el usuario navega hacia la derecha.
• nextFocusUp: designa la siguiente vista para recibir el foco cuando el usuario navega hacia arriba.
• testID: Se utiliza para ubicar esta vista en pruebas de extremo a extremo.
• touchSoundDisabled: si es verdadero, no reproduce el sonido del sistema al tocarlo.

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: Tendrá el siguiente aspecto.

Ejemplo: ahora implementemos el botón. Aquí creamos un botón y cuando alguien haga clic en ese botón, el conteo cambiará.

Aplicación.js

import React , {useState} from 'react';
import { StyleSheet, Text, View , Button } from 'react-native';
  
export default function App() {
  const [count , setcount] = useState(0);
  const changeCount = () => {
    setcount(count + 1);
  }
  return (
    <View style={styles.container}>
        <Text style={styles.text}>{count}</Text>
        <Button
          title={"Click Me"}
          onPress={changeCount}
        />
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text : {
    fontSize : 40,
    marginBottom : 30
  }
});

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/button