React Native - 模型(Modal)

React Native - 模型(Modal) 首页 / React Native入门教程 / React Native - 模型(Modal)

在本章中,我们将向您展示如何在React Native中使用模式组件,现在让我们创建一个新文件: ModalExample.js,我们将逻辑放在 ModalExample 中,我们可以通过运行 toggleModal 来更新初始状态。

通过运行 toggleModal 更新初始状态后,我们将 visible 属性设置为模态,onRequestClose 对于Android设备是必需的。

App.js

链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-modal.html

来源:LearnFk无涯教程网

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

const Home=() => {
   return (
      <WebViewExample/>
   )
}
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 (
         <View style={styles.container}>
            <Modal animationType={"slide"} transparent={false}
               visible={this.state.modalVisible}
               onRequestClose={() => { console.log("Modal has been closed.") } }>
               
               <View style={styles.modal}>
                  <Text style={styles.text}>Modal is open!</Text>
                  
                  <TouchableHighlight onPress={() => {
                     this.toggleModal(!this.state.modalVisible)}}>
                     
                     <Text style={styles.text}>Close Modal</Text>
                  </TouchableHighlight>
               </View>
            </Modal>
            
            <TouchableHighlight onPress={() => {this.toggleModal(true)}}>
               <Text style={styles.text}>Open Modal</Text>
            </TouchableHighlight>
         </View>
      )
   }
}
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
   }
})

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

React Native Open Modal

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

React Native Modal

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

TensorFlow快速入门与实战 -〔彭靖田〕

DevOps实战笔记 -〔石雪峰〕

JavaScript核心原理解析 -〔周爱民〕

如何成为学习高手 -〔高冷冷〕

如何落地业务建模 -〔徐昊〕

编程高手必学的内存知识 -〔海纳〕

超级访谈:对话汤峥嵘 -〔汤峥嵘〕

人人都用得上的数字化思维课 -〔付晓岩〕

LangChain 实战课 -〔黄佳〕

好记忆不如烂笔头。留下您的足迹吧 :)