¿Cómo crear un botón en la aplicación React-Native?

En este artículo, veremos cómo crear botones en react-native, su sintaxis y los diferentes tipos de botones disponibles en react native.

Crear un botón en reaccionar nativo es muy simple. Primero, tenemos que importar el componente del botón desde React Native.

import { Button } from 'react-native'

Si no está familiarizado con los componentes de React Native, puede consultar el artículo introductorio sobre React Native .

Sintaxis:

import React, { Component } from 'react'
import { Button } from 'react-native'
const Test = () => {
    return(
        <Button 
            // Define Button property
        />
    )
}
export default Test

La sintaxis anterior muestra cómo se usa un botón en reaccionar nativo. Se trata de definir una etiqueta XML con un elemento de botón; ahora, de acuerdo con nuestros requisitos, se pueden definir diferentes propiedades para un botón.

Tipos de botones en React Native Hay cinco tipos de botones que se enumeran a continuación:

1. Tipos básicos: estos entran en la categoría básica y pueden ser de los siguientes tipos:
   • Botón: se utiliza para definir botones de clic.
   • Enviar: este tipo de botón se utiliza junto con un formulario para enviar detalles.
   • Restablecer: se utiliza para borrar el contenido del campo al hacer clic en él.
2. Botón Plano: Tiene un estilo sin color de fondo. Para crear un botón plano en reaccionar, configure la clase CSS en e-flat.
3. Botón de contorno: este tipo de botón contiene un borde con un fondo transparente. Para crear este tipo de botón, configure la clase CSS como un esquema electrónico.
4. Botón redondo: este botón tiene forma circular. Para crear un botón redondo, establezca la clase CSS en e-round.
5. Botón de alternar: el botón de alternar es un botón cuyo estado se puede cambiar. Consideremos un ejemplo de un botón de reproducción y pausa. Al hacer clic en este botón, su estado cambia y después de otro clic, recupera su estado original. Esta función de cambio de estado se logra haciendo clic en el evento del botón. Para crear un conmutador, debemos establecer la propiedad isToggle en verdadero.

Pasos para crear Botones:

• Escriba y exporte el código para hacer el botón y colóquelo en un componente reutilizable.
• Importe ese componente en el archivo App.js.
• Ponga ese botón en su archivo al igual que cualquier otro componente.
• Agregue algo de estilo en el archivo del botón.

Código completo para crear un Botón en React Native:

import React from 'react';
  
// Import the essential components from react-native
import {
    StyleSheet, Button, View, SafeAreaView,
    Text, Alert
} from 'react-native';
  
// Function for creating button
export default function App() {
    return (
        <View style={styles.container}>
  
            // Create a button
            <Button
  
                // Some properties given to Button
                title="Geeks"
                onPress={() => Alert.alert(
                    'Its GeeksforGeeks !')}
            />
        </View>
    );
}
  
// Some styles given to button
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#71EC4C',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Producción:

• Antes de hacer clic en el botón:
  
• Después de hacer clic en el botón:
  

Pasos para ejecutar el proyecto:

• Vaya a la carpeta de su proyecto y escriba el siguiente comando en la terminal. El siguiente comando crea tu proyecto.

  react-native init MyAppName

• Seleccione el archivo App.js y pegue el código del proyecto (el código completo del proyecto indicado anteriormente) y luego guarde el archivo.
• Inicie un emulador para ejecutar el proyecto. El siguiente comando iniciará el emulador.

  emulator -avd MyAVD

• Ahora, use ejecutar el proyecto usando el siguiente comando.

  react-native run-android

Otro enfoque para Run Project:

• Abre la terminal y salta a la carpeta de tu proyecto.

  cd ProjectName

• Para ejecutar el proyecto en Expo, escriba el siguiente comando en su terminal.

  expo start

• Escanee el código de barras de la aplicación Expo en su aplicación Expo en su móvil.