如何在 React Native 中创建一个基本按钮？

React Native 是 Meta Platforms, Inc 创建的开源 UI 软件框架。它用于开发适用于 Android、Android TV、iOS 等的应用程序。我们一直在寻找更短的开发周期、更快的部署时间和更好的应用性能。并且有很多混合移动框架，例如 NativeScript、React Native、 Ionic、Xamarin、PhoneGap 等。

在本文中，我们将看到如何在 React-Native 中创建一个基本按钮。要创建一个 React-Native 应用程序，我们将使用 Expo CLI 版本，它可以更流畅地运行您的 React Native 应用程序。
Expo：它是通用 React 应用程序的框架和平台。它是一组围绕 React Native 和原生平台构建的工具和服务，可帮助您使用相同的 JavaScript/TypeScript 代码库在 iOS、Android 和 Web 应用程序上开发、构建、部署和快速迭代。

方法：我们将在这里创建 3 种类型的按钮。

• 基本按钮
• 自定义彩色按钮
• 禁用按钮

我们将使用 标签

语法：

以下是上述方法的逐步实现。

第 1 步：打开终端并运行以下命令。

npm install -g expo-cli

第 2 步：现在 expo-cli 已全局安装，因此您可以通过运行以下命令来创建项目文件夹。

expo init "projectName"

第 3 步：现在进入创建的文件夹并使用以下命令启动服务器。

cd "projectName"

项目结构：它将如下所示。

第4步：下面是代码的实现。在App.js文件中，我们使用 标签简单地创建了一个按钮。我们还将使用颜色属性设置它的颜色。

App.js

import React from "react";
import {StyleSheet, Button,Text, Alert ,View} from "react-native";
  
function App() {
  return (
    
     Simple Button
    

Alert.alert('Simple Button pressed')}   />   Coloured Button     Alert.alert('Coloured Button pressed')}   />   Disabled Button     Alert.alert('Cannot press this one')}   />          )   } const styles=StyleSheet.create({   header:{     fontSize: 20,     fontWeight: "bold"   },   setMargin:{     marginTop:50   } }) export default App;