如何在 React-Native App 中创建按钮？

在本文中，我们将了解如何在 react-native 中创建按钮、它们的语法，以及 react-native 中可用的不同类型的按钮。

在 react native 中创建一个 Button 非常简单。首先，我们必须从 React Native 中导入按钮组件。

import { Button } from 'react-native'

如果你不熟悉 React Native 的组件，可以查看 React Native 的介绍文章

句法：

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

上面的语法显示了如何在 react native 中使用按钮。它涉及定义带有按钮元素的 XML 标记，现在可以根据我们的要求为按钮定义不同的属性。

React Native中的按钮类型有以下五种类型的按钮：

1. 基本类型：这些属于基本类别，可以是以下类型：
   • Button：用于定义点击按钮。
   • 提交：这种类型的按钮与表单一起使用以提交详细信息。
   • 重置：用于点击清除字段内容。
2. Flat Button：它有一种没有背景颜色的样式。要在 react 中创建平面按钮，请将 CSS 类设置为 e-flat。
3. 轮廓按钮：这种类型的按钮包含带有透明背景的边框。要创建这种类型的按钮，请将 CSS 类设置为电子大纲。
4. 圆形按钮：此按钮为圆形。要创建圆形按钮，请将 CSS 类设置为 e-round。
5. 切换按钮：切换按钮是可以更改状态的按钮。让我们考虑一个播放和暂停按钮的例子。单击此按钮时，其状态会发生变化，再次单击后，它会恢复其原始状态。这个状态改变函数是通过按钮的点击事件来实现的。要创建切换，我们需要将 isToggle 属性设置为 true。

创建按钮的步骤：

• 编写并导出代码以制作按钮并将其放入可重用组件中。
• 将该组件导入 App.js 文件。
• 将该按钮与任何其他组件一样放在您的文件中。
• 在按钮文件中添加一些样式。

在 React Native 中创建 Button 的完整代码：

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 (
        
  
            // Create a button
             Alert.alert(
                    'Its GeeksforGeeks !')}
            />
        
    );
}
  
// Some styles given to button
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#71EC4C',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

输出：

• 点击按钮前：
  
• 点击按钮后：
  

运行项目的步骤：

• 转到您的项目文件夹并在终端上键入以下命令。以下命令创建您的项目。

  react-native init MyAppName

• 选择 App.js 文件并粘贴项目代码（上面给出的项目的完整代码），然后保存文件。
• 启动模拟器来运行项目。以下命令将启动模拟器。

  emulator -avd MyAVD

• 现在，使用以下命令运行项目。

  react-native run-android

运行项目的另一种方法：

• 打开终端并跳转到您的项目文件夹。

  cd ProjectName

• 要在 Expo 上运行项目，请在终端中输入以下命令。

  expo start

• 在您的手机中扫描您的 Expo 应用程序中的 Expo 应用程序条形码。