📅  最后修改于: 2020-12-08 06:11:02             🧑  作者: Mango
在本章中,我们将向您展示如何在React Native中使用模式组件。
现在让我们创建一个新文件: ModalExample.js
我们将逻辑放入ModalExample 。我们可以通过运行toggleModal更新初始状态。
通过运行toggleModal更新初始状态后,我们将visible属性设置为模态。状态更改时,该道具将更新。
Android设备需要onRequestClose 。
import React, { Component } from 'react'
import WebViewExample from './modal_example.js'
const Home = () => {
return (
)
}
export default Home;
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
}
})
我们的启动屏幕将如下所示:
如果单击按钮,将打开模态。