如何在 React Native 中添加浮动按钮？

React Native 是由 Meta Platforms, Inc 创建的开源 UI 软件框架。它用于开发适用于 Android、Android TV、iOS、macOS、tvOS、Web、Windows 和 UWP 的应用程序，使开发人员能够同时使用 React 框架具有本机平台功能。

在本文中，我们将学习如何在 React Native 中添加浮动按钮。

创建 React Native 应用程序：

第 1 步：我们将使用 expo 创建 React Native 应用程序。在终端中使用以下命令安装 expo-cli。

npm install -g expo-cli

第 2 步：使用 expo 创建一个 React Native 项目。

expo init "gfg"

第 3 步：现在使用以下命令转到创建的项目。

cd "gfg"

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

创建浮动按钮：我们可以轻松地在我们的 react native 应用程序中添加浮动按钮。为此，我们将使用 react-native 的 TouchableOpacity 组件。  

示例：在App.js文件中添加以下代码。

Javascript

import React, { useState } from "react";
import { View, Text, TouchableOpacity } from "react-native";
  
  
const GfGApp = () => {
  
    return (
        
            
                GeeksforGeeks React Native Floating Button
            
              
             { alert('Button is pressed') }}
            >
                Floating
            
        
    );
};
  
export default GfGApp;

首先，我们使用 TouchableOpacity 创建浮动按钮。然后我们为我们的按钮添加样式。

运行应用程序：现在在终端中使用以下命令运行应用程序。

npm run web

输出：