📜  React Native-模态

📅  最后修改于: 2020-12-08 06:11:02             🧑  作者: Mango


在本章中,我们将向您展示如何在React Native中使用模式组件。

现在让我们创建一个新文件: ModalExample.js

我们将逻辑放入ModalExample 。我们可以通过运行toggleModal更新初始状态。

通过运行toggleModal更新初始状态后,我们将visible属性设置为模态。状态更改时,该道具将更新。

Android设备需要onRequestClose

App.js

import React, { Component } from 'react'
import WebViewExample from './modal_example.js'

const Home = () => {
   return (
      
   )
}
export default Home;

modal_example.js

import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View, StyleSheet}

from 'react-native'
class ModalExample extends Component {
   state = {
      modalVisible: false,
   }
   toggleModal(visible) {
      this.setState({ modalVisible: visible });
   }
   render() {
      return (
         
             { console.log("Modal has been closed.") } }>
               
               
                  Modal is open!
                  
                   {
                     this.toggleModal(!this.state.modalVisible)}}>
                     
                     Close Modal
                  
               
            
            
             {this.toggleModal(true)}}>
               Open Modal
            
         
      )
   }
}
export default ModalExample

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
      backgroundColor: '#ede3f2',
      padding: 100
   },
   modal: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: '#f7021a',
      padding: 100
   },
   text: {
      color: '#3f2949',
      marginTop: 10
   }
})

我们的启动屏幕将如下所示:

反应本机开放模态

如果单击按钮,将打开模态。

反应本机模态