React Native Modal

2025年3月17日 | 阅读 3 分钟

React Native Modal 是一种 View 组件，用于在封闭的视图上方呈现内容。Modal 中有三种不同的选项（slide、fade 和 none），决定了模态框在 react native 应用程序中的显示方式。

Modal 显示在屏幕上方，覆盖整个应用程序区域。要在我们的应用程序中使用 Modal 组件，我们需要从 react-native 库中导入 Modal。

Modal Props

Props	描述
visible（可见）	此 prop 决定您的模态框是否可见。
supportedOritentions	它允许以任何指定的方向（portrait、portrait-upside-down、landscape、landscape-left、landscape-right）旋转模态框。
onRequestClose	这是一个回调 prop，当用户在 Android 上点击硬件后退按钮或在 Apple TV 上点击菜单按钮时调用。
onShow	这允许传递一个函数，该函数将在模态框可见后显示。
透明	它确定模态框是否会覆盖整个视图。将其设置为“true”会在透明背景上呈现模态框。
animationType	它控制模态框的动画方式。有三种类型的动画 prop 可用 slide: 它从底部滑动模态框。 fade: 它淡入视图。 none: 它在没有任何动画的情况下出现模型。
hardwareAccelerated	它控制是否强制为底层窗口进行硬件加速。
onDismiss	此 prop 传递一个函数，该函数将在模态框被关闭后调用。
onOrientationChange	当模态框显示时方向发生变化时，将调用此 props。方向的类型是“portrait”或“landscape”。
presentationStyle	它控制模型的外观（fullScreen、pageSheet、fromSheet、overFullScreen），通常在大型设备上。
animated	此 prop 已弃用。请改用 animatedType prop，上面已讨论过。

React Native Modal 示例

让我们看一个在单击按钮时显示弹出模态框的示例。一旦我们单击按钮，状态变量 isVisible 设置为 true 并打开 Modal 组件。

要实现 Modal 组件，请从 react-native 库导入 Modal。

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, Modal} from 'react-native';

export default class App extends Component<Props> {
  state = {
    isVisible: false, //state of modal default false
  }
  render() {
    return (
      <View style = {styles.container}>
        <Modal          
          animationType = {"fade"}
          transparent = {false}
          visible = {this.state.isVisible}
          onRequestClose = {() =>{ console.log("Modal has been closed.") } }>
          {/*All views of Modal*/}
              <View style = {styles.modal}>
              <Text style = {styles.text}>Modal is open!</Text>
              <Button title="Click To Close Modal" onPress = {() => {
                  this.setState({ isVisible:!this.state.isVisible})}}/>
          </View>
        </Modal>
        {/*Button will change state to true and view will re-render*/}
        <Button 
           title="Click To Open Modal" 
           onPress = {() => {this.setState({ isVisible: true})}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  modal: {
  justifyContent: 'center',
  alignItems: 'center', 
  backgroundColor : "#00BCD4", 
  height: 300 ,
  width: '80%',
  borderRadius:10,
  borderWidth: 1,
  borderColor: '#fff',  
  marginTop: 80,
  marginLeft: 40,
 
   },
   text: {
      color: '#3f2949',
      marginTop: 10
   }
});

输出