如何使用React Native创建模态窗口

Question

开发人员！

我试着用React创建一个简单的模态窗口。

但是我的窗户仍然没有出现！

所以，我的代码有两部分：JS部分和CSS部分。

我使用了"Modal"关键字、构造函数和render((。我所有的代码都是在CodePen区域编写的，所以我可以看到结果。但仍然缺少一些东西。它是什么？

它将是移动应用程序。所以，我应该在某个地方使用关键字"Native"吗？

import "./modal.scss";
class Modal extends React.Component {
constructor(props) {
super(props);
}
shouldComponentUpdate(nextProps) {
return !I.is(this.props.data, nextProps.data);
}
render() {
let isOpen = this.props.data.get("isOpen");
return (
<div className={`flex middle center modal ${isOpen ? "open" : ""}`}>
{isOpen ?
(<div className={`row modal-content ${this.props.size || ""}`}>
<div className="col-12 middle modal-title">{this.props.title}</div>
<div className="col-12 modal-body">
{this.props.body}
</div>
<div className="col-12 middle modal-footer">{this.props.footer}</div>
</div>) : null
}
</div>);
}
}
export default Modal;

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
padding: 2rem;
background-color: rgba(0, 0, 0, 0.55);
.modal-content {
background-color: white;
max-height: 80%;
height: 80%;
.modal-title {
padding: 0 2.25rem;
height: 5rem;
max-height: 5rem;
text-transform: uppercase;
font-size: 1.8rem;
}
.modal-body {
height: calc(100% - 16rem);
overflow-y: scroll;
padding: 0 2rem;
}
.modal-footer {
height: 5rem;
max-height: 5rem;
padding: 0 2.25rem;
}
}
}

另请参阅CodePen的片段：在此处输入图像描述

Answer 1

import Modal from "react-native-modal";
render () {
return (
<View>
<Modal isVisible={true}>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
</View>
</Modal>
</View>
)
}

另请参阅https://github.com/react-native-community/react-native-modal

Answer 2

我认为您要做的是制作一个移动应用程序。最好的方法是使用ReactReact Native而不是React

看看这个：

https://github.com/react-community/create-react-native-app

一旦开始在屏幕上显示模态，就非常简单。

https://facebook.github.io/react-native/docs/modal#docsNav

如果这是你第一次，最好遵循React Native网站上的入门指南。这很有帮助。没有div，但是inLine样式仍然可以使用。

https://facebook.github.io/react-native/docs/getting-started

希望这能帮助