如何在 react-native 中创建横幅？

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库来创建它。横幅用于显示重要的消息和相应的操作。

在我们的项目中，我们将显示用于捕获用户数据的输入字段和一个按钮。单击该按钮后，横幅将显示在屏幕顶部，并带有相关操作。我们将逐步了解该方法。

下面是分步实现：

第 1 步：使用以下命令在 react-native 中创建一个项目：

npx react-native init DemoProject

第 2 步：使用以下命令安装 react-native paper：

npm install react-native-paper

第 3 步：在您的项目中创建一个组件文件夹。在 components 文件夹中创建一个文件 Banner.js

项目结构：看起来像这样

第 4 步：在 Banner.js 中，我们从 react-native -paper 导入了 Banner 组件。我们将使用 useState 和 useEffect 挂钩来更新组件的状态。

横幅使用以下道具：

• 可见：它可以是真或假。它是一个强制属性，负责显示或隐藏 Banner 组件。
• 操作：要在横幅中显示的操作项。操作项应包含以下属性：
  • label：操作按钮的标签（必填）
  • onPress：按下按钮时调用的回调（必需）

实现：在各自的文件中写下代码。

Banner.js

import React, { useState } from "react";
import { View, StyleSheet, Alert } from "react-native";
import { Banner, Button, TextInput } from "react-native-paper";
  
const BannerComponent = () => {
    const [visible, setVisible] = useState(false);
    const [Email, setEmail] = useState("");
    const [phone, setPhone] = useState("");
  
    return (
        
             setVisible(false) },
                    {
                        label: "Proceed",
                        onPress: () => {
                            setVisible(false);
                            setEmail("");
                            setPhone("");
                            Alert.alert("Thanks for your Confirmation");
                        },
                    },
                ]}
            >
                Your details has been captured. It will select in an hour.
            
  
             setEmail(text)}
            />
  
             setPhone(text)}
            />
  
             setVisible(true)}>Submit
        
    );
};
  
export default BannerComponent;
  
const styles = StyleSheet.create({
    input: {
        margin: 20,
    },
});

应用程序.js

import React from "react";
import type { Node } from "react";
import { View } from "react-native";
import BannerComponent from "./components/Banner";
  
const App: () => Node = () => {
    return (
        
            
        
    );
};
  
export default App;

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

npx react-native run-android

输出：