React Native 模态组件

以下方法介绍了如何在 react-native 中创建 Modal。为此，我们将使用模态组件。这是在封闭视图上方呈现内容的基本方式。

句法：

模态中的道具：

animationType：此属性控制模态动画的方式。
动画：此道具已弃用，现在使用animationType代替。
hardwareAccelerated：此属性控制是否为底层窗口强制硬件加速。它仅适用于安卓设备。
onDismiss：这个道具允许传递一个函数，一旦模态被解除，该函数将被调用。它仅适用于 ios 设备。
onOrientationChange：在显示模态时方向发生变化时调用。它仅适用于 ios 设备。
onRequestClose：当用户点击 Android 上的硬件返回按钮时调用。
onShow：此道具允许传递一个函数，该函数将在模式显示后被调用。
presentationStyle：此属性控制模态框的显示方式。它仅适用于 ios 设备。
statusBarTranslucent：这个属性决定了你的模态是否应该在系统状态栏下。
supportedOrientations：此道具允许将模态旋转到任何指定的方向。它仅适用于 ios 设备。
transparent：这个道具决定了你的模态是否会填满整个视图。
可见：这个道具决定你的模态是否可见。

现在让我们从实现开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init myapp
```
第 3 步：现在进入您的项目文件夹，即 myapp
```
cd myapp
```

项目结构：它看起来像这样。

示例：现在让我们实现 Modal。在这里，我们创建了一个当我们单击按钮时出现的模态。

应用程序.js

App.js

import React , {useState} from 'react';
import { StyleSheet, View , Text , Modal , Button } from 'react-native';
export default function App() {
  const [active , setactive] = useState(false);
  return (
    
         {
          console.warn("closed");
        }}
        >
          
            
            GeeksforGeeks

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnative.dev/docs/modal