¿Cómo crear un botón básico en React Native?

React Native es un marco de software de interfaz de usuario de código abierto creado por Meta Platforms, Inc. Se utiliza para desarrollar aplicaciones para Android, Android TV, iOS, etc. Siempre estamos buscando ciclos de desarrollo más cortos, un tiempo de implementación más rápido y mejores rendimiento de la aplicación. Y hay tantos marcos móviles híbridos como NativeScript, React Native, Ionic, Xamarin, PhoneGap, etc.

En este artículo, veremos cómo crear un botón básico en React-Native . Para crear una aplicación React-Native, utilizaremos la versión Expo CLI que será mucho más fluida para ejecutar sus aplicaciones React Native. 
Expo: Es un framework y una plataforma para aplicaciones React universales. Es un conjunto de herramientas y servicios construidos alrededor de React Native y plataformas nativas que lo ayudan a desarrollar, construir, implementar e iterar rápidamente en iOS, Android y aplicaciones web desde la misma base de código JavaScript/TypeScript.

Enfoque: Crearemos 3 tipos de botones aquí.

• Botón básico
• Botón de color personalizado
• Botón deshabilitado

Usaremos la etiqueta <Button>

Sintaxis :

<Button title= "setTitle" ></Button>

A continuación se muestra la implementación paso a paso del enfoque anterior.

Paso 1: Abra su terminal y ejecute el siguiente comando.

npm install -g expo-cli

Paso 2: ahora expo-cli está instalado globalmente para que pueda crear la carpeta del proyecto ejecutando el siguiente comando.

expo init "projectName"

Paso 3: Ahora ve a la carpeta creada e inicia el servidor usando el siguiente comando.

cd "projectName"

Estructura del proyecto: Tendrá el siguiente aspecto. 

Paso 4: A continuación se muestra la implementación del código. En el archivo App.js , simplemente creamos un botón usando la etiqueta <Button>. También estableceremos su color usando el atributo de color.

import React from "react";
import {StyleSheet, Button,Text, Alert ,View} from "react-native";
  
function App() {
  return (
    <View style={styles.setMargin}>
     <Text style={styles.header}>Simple Button</Text>
    <Button
    title="Press me"
    onPress={() => Alert.alert('Simple Button pressed')}
  />
  <Text style={styles.header}>Coloured Button</Text>
   <Button
    title="Press me"
    color="#f194ff"
    onPress={() => Alert.alert('Coloured Button pressed')}
  />
  <Text style={styles.header}>Disabled Button</Text>
   <Button
    title="Press me"
    disabled
        onPress={() => Alert.alert('Cannot press this one')}
  />
    </View>
    )
  }
const styles=StyleSheet.create({
  header:{
    fontSize: 20,
    fontWeight: "bold"
  },
  setMargin:{
    marginTop:50
  }
})
export default App;

Paso para ejecutar la aplicación: para ejecutar el programa React-Native, use el siguiente comando.

npm start web

Producción: