如何在本机反应中创建浮动操作按钮？

React Native 是 Facebook 开发的一个框架，用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初，Facebook 只开发了 React Native 来支持 iOS。但是，由于最近支持 Android 操作系统，该库现在可以为这两个平台呈现移动 UI。

先决条件：

• ReactJs 的基础知识。
• 具有 ES6 语法的 Html、CSS 和 javascript。
• NodeJs 应该安装在您的系统中（安装）。
• Jdk 和 android studio 用于在模拟器上测试您的应用程序（安装）。

方法：在本文中，我们将在 react-native 中创建一个浮动操作按钮。要创建它，我们将使用react-native-paper库。

在我们的项目中，我们将创建一个 FAB，然后单击它，将出现文本字段。我们将一步一步地看到实现。

创建 React Native 应用程序：

第 1 步：创建一个 react-native 项目：

npx react-native init DemoProject

第 2 步：现在安装 react-native-paper

npm install react-native-paper

第三步：启动服务器

npx react-native run-android

第 4 步：现在转到您的项目并创建一个组件文件夹。在 components 文件夹中，创建一个文件 Fab.js

项目结构：项目应如下所示：

示例：在 Fab.js 中，最初，输入字段和按钮将被隐藏。在更改它们的状态时，两者都将出现在 Fab 按钮下方。

Fab.js

import React, { useState } from 'react';
import { View, StyleSheet, Alert, Button } from 'react-native';
import { FAB, TextInput } from 'react-native-paper';
  
const FabExample = () => {
  const [text, setText] = useState('');
  const [showText, setShowText] = useState(false);
  const [disablebtn, setDisablebtn] = useState(true);
  
  const addItem = (text) => {
    setShowText(true);
  };
  const showAlert = () => {
    Alert.alert('Item added successfully');
  };
  
  return (
    
      
      {showText ? (
        
           {
              setText(newText);
              setDisablebtn(false);
            }}
          />
          
            
          
        
      ) : (
        <>
      )}
    
  );
};
  
export default FabExample;
  
const styles = StyleSheet.create({
  fab: {
    position: 'relative',
    margin: 16,
    marginTop: 40,
    right: 0,
    bottom: 0,
  },
  textInput: {
    position: 'relative',
    margin: 18,
  },
  btn: {
    marginTop: 20,
  },
});

应用程序.js

import React from 'react';
import { View } from 'react-native';
import FabExample from './components/Fab';
  
const App: () => Node = () => {
  return (
    
      
    
  );
};
  
export default App;

运行应用程序的步骤：使用以下命令运行应用程序：

npx react-native run-android

输出：